Для L oop с данными JSON возвращается неожиданный идентификатор

Question

У меня есть следующее javascript

            for (var i = 0; i < e.blog.length; i++) {

var id = e.blog[i].id;
var date = e.blog[i].date;
var title = e.blog[i].title;
var image = e.blog[i].image;
var excerpt = e.blog[i].excerpt;
var tags = e.blog[i].tags;
var html =
  'img src="' +
  image +
  '" alt="' +
  title +
  'image"<h1>' +
  title +
  "</h1>" +
  '<div class="post-details">' +
  '<span class="post-date">' +
  published +
  '<h2 class="post-title">' +
  title +
  "</h2>" +
  '<p class="post-excerpt">' +
  excerpt +
  "</p>" +
  '<div class="post-categories">' +
  '<span class="post-tag">' +
  tags +
  "</span>" +
  "</div> </div>";

      html = document.getElementById("data").innerHTML = html;
    }
  });

    
            document.getElementById('data').innerHTML = html

Взятие содержимого из этого JSON ответа

{
  ... (rest of json file before these dots important bit below)
  },
  "blog": {
    "post-1": {
      "id": "1",
      "date": "2020.08.01",
      "title": "Post Title",
      "excerpt": "Post excerpt goes here",
      "tags": "Post Tag 1, Post Tag 2",
      "body": "Blog body content goes in this field"
    },
    "post-2": {
      "id": "1",
      "date": "2020.08.01",
      "title": "Post Title",
      "excerpt": "Post excerpt goes here",
      "tags": "Post Tag 1, Post Tag 2",
      "body": "Blog body content goes in this field"
    }
  }
}

И он должен отображать HTML из javascript в div с идентификатором data, показанным ниже

    <div id='data'>
    </div>

Однако он возвращает следующую ошибку: Unexpected identifier 'I'

Как мне go исправить это? не должно ли это работать из-за того, что я был указан в начале for l oop?

Создал массив из блога, однако все, что он делает, это возвращает следующую ошибку. Код ниже ошибки

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e.blog[i].id')

JS

    const arrBlog = Object.values(e.blog);
    console.log(arrBlog);
    for (var i = 0; i < arrBlog.length; i++) {
      var id = arrBlog[i].id;
      var date = arrBlog[i].date;
      var title = arrBlog[i].title;
      var image = arrBlog[i].image;
      var excerpt = arrBlog[i].excerpt;
      var tags = arrBlog[i].tags;
      var html = `
                  <div class="post">
            <img src="${image}" alt="${title} Image" />
            <div class="post-details">
                    <span class="post-date">${date}</span>
                    <h2 class="post-title">${title}</h2>
                    <p class="post-excerpt">${excerpt}</p>
                    <div class="post-categories">
                        <span class="post-tag">${tags}</span>
                    </div>
            </div>
        </div>
            `;
      html = document.getElementById("data").innerHTML = html;

Answer 1

1. html i += должно быть html +=

2. e.blog не является массивом, поэтому e.blog.length не определено. Вместо этого вы можете использовать al oop, например: for (var i in e.blog)

3. Я исправил ваш обновленный код:

const arrBlog = Object.values(e.blog)
for (var i = 0; i < arrBlog.length; i++) {
    var published = "";
    var document = "";
    var id = arrBlog[i].id;
    var date = arrBlog[i].date;
    var title = arrBlog[i].title;
    var image = arrBlog[i].image;
    var excerpt = arrBlog[i].excerpt;
    var tags = arrBlog[i].tags;
    var html =
        'img src="' +
        image +
        '" alt="' +
        title +
        'image"<h1>' +
        title +
        "</h1>" +
        '<div class="post-details">' +
        '<span class="post-date">' +
        published +
        '<h2 class="post-title">' +
        title +
        "</h2>" +
        '<p class="post-excerpt">' +
        excerpt +
        "</p>" +
        '<div class="post-categories">' +
        '<span class="post-tag">' +
        tags +
        "</span>" +
        "</div> </div>";
    document.getElementById("data").innerHTML += html;
}

Answer 2

В строке 2 вы выполняете html i += [...], что недействительно JavaScript. Я думаю, вы имеете в виду html += [...] без i там

Answer 3

Ваш блог - это объект, а не массив.

const arrBlog = Object.values(response.blog)
for(var i=0 ; i<arrblog.length ;i++ ){...

Answer 4

response.blog не является массивом. Попробуйте получить Object.keys(response.blog), а затем перебирайте их.

Посмотрите этот пример:

const keys = Object.keys(response.blog);

keys.map(key => `<div attr="${response.blog[key].something}">...</div>`)