Вывести значения с JSON файла в браузер на js

216

22 марта 2022, 11:10

Вот код запроса:

fetch('./db.json')
    .then(function(data){
     return JSON.stringify(data);
    })
    .then(function(data2){

      console.log(data2);
      for (var item in data2){
  const number = document.createElement('td');
  const user = document.createElement('td');
  console.log(item);
  console.log(item.num)
  number.textContent = `${item.num}`;
  user.textContent = `${item.username}`;
  document.body.append(number, user);
  }
})

Вот JSON файл:

[{
    "num": 1,
    "username": "user1",
}, {
    "num": 2,
    "username": "user2",
}]

Вот ответ браузера в консоли:

request.js:8 {}
request.js:17 0
request.js:18 undefined
request.js:17 1
request.js:18 undefined

Как мне вывести значения?

Answer 1

number.textContent = `${data2[item].num}`;
user.textContent = `${data2[item].username}`;

Или:

for (var item of data2){ }

Answer 2

там песочница

IDE

использование продвинутого редактора во многом облегчит изучение, рекомендую VSCode

fetch

fetch получает в ответ response а не data

fetch - https://learn.javascript.ru/fetch

JSON

JSON.stringify - https://learn.javascript.ru/json#json-stringify
JSON.parse - https://learn.javascript.ru/json#json-parse

тут можно запустить

// -,- 
// fetch('./db.json') 
//     .then(resp => { 
//         if (resp.ok) return resp.json() 
//         else throw new Error('что-то не так') 
//     }) 
//     .then(showJson) 
// - ,- 
test: {//     .then(showJson) 
    showJson([{ 
            "num": 1, 
            "username": "user1", 
        }, { 
            "num": 2, 
            "username": "user2", 
        }]); 
} 
// -, - 
function showJson(json) { 
    console.log(json); 
    for (var key in json) { 
        const value = json[key]; 
        const numberEl = document.createElement('div'); 
        const userEl = document.createElement('div'); 
        console.log(value); 
        console.log(value.num); 
        numberEl.textContent = `${value.num}`; 
        userEl.textContent = `${value.username}`; 
        document.body.append(numberEl, userEl); 
    } 
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Access Violation при работе с CSP

Есть библиотека для работы с криптопровайдером наNET Core

Передать типы данных из C# в DLL на С

Я создал веб-проект на ASPNET CORE и к нему собрал и подключил библиотеку, написанную на C

Перенос данных между формами

Есть две формы, на одной отображаются данные в таблице на другой они добавляютсяНадо что бы после нажатия сохранить на второй форме, внесенные...

Если бы ASP.NET Core был одно-поточен

Согласно моему познанию ASPNET Core и если сильно не углубляться в детали, то на сегодняшний день обработка HTTP-запросов на одноядерном процессоре...

176