Question 217292 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to optimize fetching data from JSON

Is there any solutions of fetching data more fast and determine data length without loading all JSON data.

Here is code

const url = "https://jsonplaceholder.typicode.com/comments";
  const [data, setData] = useState([]);
  const [colorScheme, setColorScheme] = useState(true);
  const [loader, setLoader] = useState(true);

  const rand = (param) => Math.ceil(Math.random() * param);

  async function fetchData() {
    try {
      // const templ = await axios.get(url);
      const res = await axios.get(
        url + `?id=${rand((await axios.get(url)).data.length)}`
      );
      setData(res.data);
      setLoader(false);
      console.warn(data);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

Tried to cache data, but I want a more efficient option

Tags:

3

Answers


  1. 0

    Currently, the code makes two API calls to get the length of the data and then fetch a random comment. It’s better to make a single API call to fetch the data and then randomly select a comment from it. Like this:

    const [data, setData] = useState([]);
  const [colorScheme, setColorScheme] = useState(true);
  const [loading, setLoading] = useState(true);

  const fetchData = useCallback(async () => {
    try {
      const response = await axios.get(url);
      const comments = response.data;
      const randomComment = comments[rand(comments.length) - 1];
      setData(randomComment);
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);
    Login or Signup to reply.
  2. 0

    In the provided code snippet, the data is fetched from the given URL, but there is no direct way to determine the length of the JSON data without loading all the data. However, there are some alternatives and optimizations that you can implement to fetch data more efficiently and handle its length without loading the entire dataset at once.

    const url = "https://jsonplaceholder.typicode.com/comments";
const [data, setData] = useState([]);
const [colorScheme, setColorScheme] = useState(true);
const [loader, setLoader] = useState(true);

const itemsPerPage = 10; // Set the number of items per page
const currentPage = rand(100); // Replace 100 with the maximum number of pages available

async function fetchData() {
  try {
    const res = await axios.get(url + `?_page=${currentPage}&_limit=${itemsPerPage}`);
    setData(res.data);
    setLoader(false);
    console.warn(data);
  } catch (error) {
    console.error(error);
  }
}

useEffect(() => {
  fetchData();
}, []);
    Login or Signup to reply.
  3. 0

    To fetch data more efficiently and determine data length without loading all JSON data, you can use pagination and filtering mechanisms provided by the API. The JSONPlaceholder API, which you are using in your example, supports various query parameters that allow you to fetch a specific number of items or filter the data based on certain criteria.

    Here’s an example of how you can implement pagination and filtering to fetch data more efficiently:

    import React, { useState, useEffect } from "react";
import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/comments";
const itemsPerPage = 10; // Set the number of items you want to fetch per page

const fetchData = async (page) => {
  try {
    const res = await axios.get(url, {
      params: {
        _page: page,
        _limit: itemsPerPage,
      },
    });
    return res.data;
  } catch (error) {
    console.error(error);
    return [];
  }
};

const Home = () => {
  const [data, setData] = useState([]);
  const [colorScheme, setColorScheme] = useState(true);
  const [loader, setLoader] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    const fetchInitialData = async () => {
      const initialData = await fetchData(currentPage);
      setData(initialData);
      setLoader(false);
    };
    fetchInitialData();
  }, [currentPage]);

  const handleLoadMore = async () => {
    const nextPage = currentPage + 1;
    const moreData = await fetchData(nextPage);
    setData((prevData) => [...prevData, ...moreData]);
    setCurrentPage(nextPage);
  };

  // Your rendering logic here
};

export default Home;

    With this approach, you initially fetch a limited number of items (e.g., 10 items) from the API. When you want to load more data, you call the handleLoadMore function, which fetches the next page of data (the next 10 items) and appends them to the existing data. This way, you can load data incrementally, and you won’t load all the JSON data at once.

    Additionally, you can implement more advanced filtering options by using query parameters like _start, _end, _sort, and _order. These parameters allow you to fetch specific ranges of data, sort the data, or apply custom filtering based on the API’s capabilities.

    Remember to adjust the itemsPerPage variable to control how many items you want to fetch per page. This will help you balance the amount of data fetched in each request.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search