How to Fetch JSON on the Front End: An Interactive Guide

Getting the right data in the correct format at the right time is crucial to making your UI living and dynamic. Data is what fuels your apps, tools and even regular websites. Visualizing your data in an orderly fashion helps your user to better understand or even filter your content.

This guide is a work in progress. Hopefully you still find something useful today.

This guide will help you to decide:

• When is the best time is to load the data?
• Which method to prefer depending on the situation?
• Where do you get the data from in the first place?

These are the questions to answering the above questions:

• What is the refresh-rate of the data?
• What is the preferred method to fetch

What is the refresh-rate of the data?

Most of the time, you will find yourself dealing with dynamic data. Which means that the dataset you fetch today, could be different tomorrow. This is most commonly true for results from a database.

If the data changes so frequently, that you need live updates, you should consider websockets. With sockets, you can push the data from the server to the browser. Live updates on the client are not always necessary though, it depends on the kind of data you want to display. It might not be the most user friendly, to make products pop up in the middle of a list, just as they were added to the catalog.

If websockets are not possible, you maybe need to cope with a pull strategy. So you have to look up the data every once in a while.

If you know, that the data will never ever change, you could maybe load it with the web app already. For example:

• list of pages

Then you should store the data as .json file and bundle it with your application.

import json from './products.json'

// render

If you

When do you need the data?

Data does not necessarily need to be there on pageload, Finding out when you need your data is crucial to deciding

Questions
    or: How to get that data from the server to the client? Do you need to use AJAX?
    You want to use data in javascript client-side.
    By answering these questions, you will know when to get the data, how to obtain it and what to do with the data afterwards.
    How to make data available
    Answers:
        When should I load the data
        How do I get the data
        How do I use the data
        How do I cache the data
    Questions:
    How do I get that data for use in my project?c
    Do you need to read or submit data?
        read
        submit
    When do you need it?
        On Pageload
        After context switch (route, dialog, pagination, infinite scroll with lazy load)
        After form submission (filter, sort, create, update, delete)
    What data do you get in return?
        A collection of items/entries
        Just the status code
    Is the data static?
        No, it is possible that entries will get added or deleted
        Yes
    How big is the data you get/submit?
        just a few entries
        Over 1KB - I am submitting files or lots of data
    Is the data confidential?
        I will post/get from my own server
        I use a public API such as google
    Do you need to request the data only once?
        once (per pagination)
        I need to poll for updates
    properties
        method: read|submit
        static: yes|no
        size: <1|>1
        publicapi: yes|no
        timing: pageload|switch|submit
        submitonredirect: yes|no
        requestamount: once|poll
    Strategy
        AJAX
            Axios
            Fetch
            Jquery
        Socket
            Eventsource
            Websocket
        Bundle
            Vanilla
            ES6 Module/Webpack