json 为什么我得到的是相反的结果

ozxc1zmp 于 12个月前发布在其他

关注(0)|答案(1)|浏览(138)

我不知道我的代码出了什么问题，它正在反转结果，但在控制台中，一切都很好，我得到了正确的结果。
下面是我的JSON：

{
    "currentUser": {
      "image": {
        "png": "./images/avatars/image-juliusomo.png",
        "webp": "./images/avatars/image-juliusomo.webp"
      },
      "username": "juliusomo"
    },
    "comments": [
      {
        "user": {
          "image": {
            "png": "./images/avatars/image-amyrobson.png"
          },
          "username": "amyrobson"
        }
      },
      {
        "user": {
          "image": {
            "png": "./images/avatars/image-maxblagun.png"
          },
          "username": "maxblagun"
        }
      }
    ]
  }

字符串
我的JavaScript：

fetch("test.json")
  .then((response) => {
    return response.json();
  })
  .then((data) => showinfo(data));

let count = -1;
function showinfo(data) {
  for (const l in data) {
    count++
    const users = `
    <div>
      <p>${data.comments[count].user.username}</p>
      <img src='${data.comments[count].user.image.png}' alt='not found'/>
    </div>
    `
    document.querySelector("body").insertAdjacentHTML("afterbegin",users);
    console.log(data.comments[count].user.username);
  }
}

型
有人能给我解释一下这是怎么回事吗，我该怎么解决

JSON

来源：https://stackoverflow.com/questions/77725535/why-im-getting-reverse-results

1条答案

按热度按时间

zpgglvta1#

因为afterbegin在body的顶部插入，所以下一次迭代将在前一次之前插入
我建议如下-为每次迭代构建字符串，然后插入ONCE

const data = {
  "currentUser": {
    "image": {
      "png": "./images/avatars/image-juliusomo.png",
      "webp": "./images/avatars/image-juliusomo.webp"
    },
    "username": "juliusomo"
  },
  "comments": [{
      "user": {
        "image": {
          "png": "./images/avatars/image-amyrobson.png"
        },
        "username": "amyrobson"
      }
    },
    {
      "user": {
        "image": {
          "png": "./images/avatars/image-maxblagun.png"
        },
        "username": "maxblagun"
      }
    },
    {
      "user": {
        "image": {
          "png": "./images/avatars/image-maxblagun.png"
        },
        "username": "wont show"
      }
    }
  ]
};

let count = -1;
let users ='';
function showinfo(data) {
  for (const l in data) {
    count++
    users += `
    <div>
      <p>${data.comments[count].user.username}</p>
      <img src='${data.comments[count].user.image.png}' alt='not found'/>
    </div>
    `
    console.log(data.comments[count].user.username);
  }
  document.querySelector("body").insertAdjacentHTML("afterbegin", users);
}
showinfo(data);

字符串
但是，您会注意到我添加了第三个注解，但没有显示出来-这是因为您的for循环有缺陷-它似乎只是因为您碰巧在data中有两个注解和两个顶级属性而起作用
这是个解决办法

const data = {
  "currentUser": {
    "image": {
      "png": "./images/avatars/image-juliusomo.png",
      "webp": "./images/avatars/image-juliusomo.webp"
    },
    "username": "juliusomo"
  },
  "comments": [{
      "user": {
        "image": {
          "png": "./images/avatars/image-amyrobson.png"
        },
        "username": "amyrobson"
      }
    },
    {
      "user": {
        "image": {
          "png": "./images/avatars/image-maxblagun.png"
        },
        "username": "maxblagun"
      }
    },
    {
      "user": {
        "image": {
          "png": "./images/avatars/image-willshow.png"
        },
        "username": "will show"
      }
    }
  ]
};

function showinfo(data) {
  let users = data.comments.map(({user}) => `<div>
      <p>${user.username}</p>
      <img src='${user.image.png}' alt='not found'/>
    </div>`).join('')
  document.body.insertAdjacentHTML("afterbegin", users);
}
showinfo(data);

型
还要注意使用document.body而不是不必要的过于复杂的document.querySelector("body")

赞(0）回复(0）举报 12个月前

我来回答

json 为什么我得到的是相反的结果

1条答案

相关问题

热门标签

最新问答