带有 JSON 数据的 For 循环返回意外的标识符

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"
    }
  }
}

它应该在 div 中显示来自 javascript 的 HTML，id 为data，如下所示

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

但是它返回以下错误 Unexpected identifier 'I'

我将如何解决这个问题？由于我在 for 循环的开头被指定，它不应该工作吗？

从博客中创建了一个数组，但它所做的只是返回以下错误。错误下面的代码

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 未定义。您可以改用这样的循环： 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

response.blog 不是数组。尝试获取Object.keys(response.blog)，然后对其进行迭代。

检查这个例子：

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

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

Answer 4

您的博客是一个对象而不是数组。

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