Блог

Я хочу сохранить Fetch API JSON как объект JavaScript, чтобы я мог использовать его в другом месте. Консоль.проверка журнала работает, но я не могу получить доступ к данным.

Работает следующее: Он показывает записи консоли с тремя задачами:

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

Следующее не работает:

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

Если я попытаюсь получить доступ к успеху, он не содержит никаких данных.

Попробовал console.log, который работает.

Также попробовали следующее, которое работает:

 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));
  

Однако я не могу вручную обновить внутренний HTML; Мне нужен объект для выполнения другого UX.

Вы также можете использовать функцию, подобную приведенной ниже:

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

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

Вы можете просто объявить переменную снаружи и присвоить ей свой результат следующим образом

 var yourTodos;

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

Тогда у вас есть объект yourTodos javascript, который вы можете использовать как угодно.

Вы можете использовать async await, как показано ниже

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

 consumingFunc()