javascript - Paginate API response object with multiple sub arrays - Stack Overflow

admin管理员组

文章数量:1122846

I have this response from a REST API service:

{
    "Business": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Entertainment": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Health": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Science": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Sports": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },

    ],
    "Technology": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "US": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "World": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ]
}

In my Vue app I've created this function to get the data and I'm using a ref to manage them inside my application:

import { ref, onMounted } from 'vue';
import axios from 'axios';
import { NewsResponse } from '@/utils';

const baseURL = '...';

const isLoading = ref<boolean>(true);
const newsFeed = ref<NewsResponse>();
//const pageSize = 12;


onMounted(() => {
  fetchNewsFeed();
});

const fetchNewsFeed = () => {
  axios.get(baseURL)
    .then((res) => {
      newsFeed.value = res.data;
      isLoading.value = false;
      console.log('api response\n',newsFeed.value);
      
    })
    .catch((err) => {
      console.log(err);
    })
}

Since each category into the response object will be an array, at the moment I'm managing it in my template using a v-for loop, all is working fine, but each array can have from 46 to 50 elements inside and this after looping the elements will result in a long age to scroll.

 <div 
    class="grid grid-cols-4 gap-4 py-3"
    v-for="(articlesCollection, cat) in newsFeed" 
    :key="cat">
    <div 
      class="card shadow-lg w-fit my-2 rounded-md"
      v-for="(article, index) in articlesCollection"
      :key="index"
    >
      <figure>
        <img class="w-full h-48" :src="article.og">
      </figure>
      <div class="card-body">
        <div class="badge badge-primary text-white">
          {{ cat }}
        </div>
        <a 
          class="no-underline" 
          :href="article.link"
        >
          <h1 class="card-title text-sm">
            {{ article.title }}
          </h1>
        </a>
        <div class="card-actions">
          <div class="badge badge-outline">
            {{ article.source }}
          </div>
        </div>
      </div>
    </div>
  </div>

My idea is to have 12 elements in a grid of 4 element for each single row and when the user reach the end of the page load new elements like the infinite scroll will do normally. How I can correctly paginate the elements in this case? I've looked at this question, but in my case not sure if I can use slice, due to the fact that I will have multiple array inside the response object.

UPDATE

I've implemented this solution to add inside each object the category and seems work, but probaly not the best way to flat the array. Any suggestion is accepted

      let tmpCat = [];
      let tmpItems = [];
      Object.entries(rawData).forEach((cat, i) => {
        tmpCat.push(cat[0]);
        cat[1].forEach((item) => {
          item['category'] = tmpCat[i];
          tmpItems.push(item);
        })
      });

本文标签： javascriptPaginate API response object with multiple sub arraysStack Overflow