What is the best way to retrieve data from a JSON file in order to display it in the inner HTML of a webpage

Question

What is the best way to retrieve data from a JSON file in order to display it in the inner HTML of a webpage

I'm encountering an issue when trying to extract data from a JSON file. I attempted to use the .map() function to map out the data, but I keep receiving an error stating that result.map() is not a defined function. How can I properly extract this data?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Test</title>
</head>
<body>
    <div id="myData"></div>
        <!-- Here a loader is created which 
             loads till response comes -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border" 
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>Registered Employees</h1>
        <!-- table for showing data -->
        <table id="employees"></table>
    </body>
    <script src="api1-2.js"></script>
</html>

javascript html css json

Answer 1

Answer №1

Make sure to utilize response.json() instead of response.text().

Both response.json() and response.text() return a Promise, however, response.json() resolves that Promise to a JavaScript object while response.text() resolves it to a String.

Answer №2

To convert the API response to a JSON object, replace response.txt() with response.json(). If you use response.text(), the result will remain as a string and not have the map method, resulting in an undefined error.

fetch("https://v1.nocodeapi.com/OPENSOURCE12/instagram/gflSSOQjdOHsVnhT", requestOptions)
    .then(response => response.json()) // 👈 make this change
    .then(result => {console.log(result)})
    .catch(error => console.log('error', error));

Answer 4

To convert the API response to a JSON object, replace response.txt() with response.json(). If you use response.text(), the result will remain as a string and not have the map method, resulting in an undefined error.

fetch("https://v1.nocodeapi.com/OPENSOURCE12/instagram/gflSSOQjdOHsVnhT", requestOptions)
    .then(response => response.json()) // 👈 make this change
    .then(result => {console.log(result)})
    .catch(error => console.log('error', error));

What is the best way to retrieve data from a JSON file in order to display it in the inner HTML of a webpage

Answer №1

Answer №2

Similar questions

Scala.js introduces a powerful feature called Scala.js yields, which

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

How to make an AJAX request in jQuery / JavaScript after a specific time interval has passed

What is the best way to arrange these divs one on top of another?

The "client-side rendering" directive in Next.js layout.tsx causes issues on mobile devices

Angular 2 table fails to refresh after callback updates collection, but a timer update triggers a full refresh of the collection

What steps can I take to tackle this issue using JavaScript?

Is it possible to modify the object's key value when generating an array value with the map function in React?

Shifting Icon to the Right within the Drawer Navigator Toolbar

Refresh needed for Jquery Menu icon changes to take effect

What steps can be taken to eliminate the undefined error in AngularJS?

Saving vast array in MongoDB

Modifying the key of a JSON file

Embrace the functionality of zooming and dragging on jVectorMap for a seamless user

Error occurs in Windows script while running a project installed globally

Creating dual permission menus for two different roles in Vue JS 3

The JsFiddle code is malfunctioning

Using CSS alone to maintain responsive aspect ratios: A solution to filling container heights

Preventing multiple clicks by toggling the HTML tag on and off

"Commitment made ahead of time without allowing for the outcome to