how do i extract my data from json file so i can put it inner html?

Question

i am trying to extract my data from JSON file i even used .map() to map out the data but it ends up showing error that result.map() is not a defined function. how do i show extract 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>

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — lejlun, Sep 14 '21 at 17:46

Kritish Bhattarai · Answer 1 · 2021-09-14T17:53:59.560

0

Replace response.txt() with response.json() to parse api response to json object. with response.text() your result is in string, so it does not have map method and hence the undefined error.

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

edited Sep 14 '21 at 17:53

answered Sep 14 '21 at 17:48

Kritish Bhattarai

1,501
15
20

it still say .map is not a function – Hammad Karamat Sep 14 '21 at 19:38
arrays have .map funciton. check if what you're trying to iterate using .map func is an array or not. if you are trying result.map and result is in `{ }` format, you will get same error – Kritish Bhattarai Sep 14 '21 at 19:43
so the array in jason file is named as data so i tried using result.data.map() , i tried removing the object but i am getting no where here – Hammad Karamat Sep 14 '21 at 20:12
just to be clear, result.data is array `[ ]` or object `{ }`? – Kritish Bhattarai Sep 14 '21 at 20:22
result is an object, {} – Hammad Karamat Sep 14 '21 at 20:34
object does not have map function – Kritish Bhattarai Sep 14 '21 at 20:36

score 0 · Accepted Answer · answered Sep 14 '21 at 17:58

You need to use response.json() instead of response.text().

response.json() and response.text() both return a Promise, but response.json() resolves that Promise to a JavaScript object while response.text() resolves that Promise to a String.

References:

how do i extract my data from json file so i can put it inner html?

2 Answers2