How to Store Fetch API JSON Response in a JavaScript Object - Stack Overflow

admin管理员组

文章数量:1335361

I want to store a Fetch API JSON as a JavaScript object, so I can use it elsewhere. The console.log test works, but I can't access the data.

The Following Works: It shows console entries with three to-do items:

 fetch('http://localhost:3000/api/todos')
    .then(data => data.json())
    .then(success => console.log(success));

The Following Does Not Work:

fetch('http://localhost:3000/api/todos')
.then(data => data.json())
.then(success => JSON.parse(success));

If I try to access success, it does not contain any data.

Have tried console.log, which works.

Have also tried the following, which works:

fetch('http://localhost:3000/api/todos')
    .then(res => res.json())
    .then(data => {
        let output = '';
        data.forEach(function (todo) {
        output += `
            <ul>
                <li>ID: ${todo.id}</li>
                <li>Title: ${todo.title}</li>
                <li>IsDone: ${todo.isdone}</li>
            </ul>
            `;
        });
        document.getElementById('ToDoList').innerHTML = output;
        return output;
    })
    .catch(err => console.log('Something went wrong: ', err));

However, I can't manually update inner HTML; I need the object to do other UX.

I want to store a Fetch API JSON as a JavaScript object, so I can use it elsewhere. The console.log test works, but I can't access the data.

The Following Works: It shows console entries with three to-do items:

 fetch('http://localhost:3000/api/todos')
    .then(data => data.json())
    .then(success => console.log(success));

The Following Does Not Work:

fetch('http://localhost:3000/api/todos')
.then(data => data.json())
.then(success => JSON.parse(success));

If I try to access success, it does not contain any data.

Have tried console.log, which works.

Have also tried the following, which works:

fetch('http://localhost:3000/api/todos')
    .then(res => res.json())
    .then(data => {
        let output = '';
        data.forEach(function (todo) {
        output += `
            <ul>
                <li>ID: ${todo.id}</li>
                <li>Title: ${todo.title}</li>
                <li>IsDone: ${todo.isdone}</li>
            </ul>
            `;
        });
        document.getElementById('ToDoList').innerHTML = output;
        return output;
    })
    .catch(err => console.log('Something went wrong: ', err));

However, I can't manually update inner HTML; I need the object to do other UX.

• javascript
• json
• api
• fetch-api

Share Improve this question Follow edited Apr 12, 2019 at 4:15 am05mhz 2,87522 gold badges2525 silver badges3737 bronze badges asked Apr 12, 2019 at 1:15 user2485860user2485860 3111 gold badge11 silver badge33 bronze badges 1

• 1 success => JSON.parse(success) <- the response has already been parsed as JSON via data.json(). You don't need to parse it again – Phil Commented Apr 12, 2019 at 2:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can also use a function like below:

 function doSomething(success){
   //do whatever you like
 }

 fetch('http://localhost:3000/api/todos')
    .then(data => data.json())
    .then(success => doSomething(success));

You can just declare a variable outside and assign your result to it like this

var yourTodos;

fetch('http://localhost:3000/api/todos')
    .then(data => data.json())
    .then(success => yourTodos = success);

Then you have the yourTodos as your javascript object that you can use whatever you want.

You can use async await like below

async function consumingFunc () {
  let response = await fetch('http://localhost:3000/api/todos')
  console.log(response)
}

 consumingFunc()

本文标签： How to Store Fetch API JSON Response in a JavaScript ObjectStack Overflow