JavaScript如何按数值索引访问JSON值并倒序遍历插入HTML

核心问题说明 #

• 你获取到的JSON是对象结构，无法直接用下标[i]访问字段，需要先转换为值数组才能实现v[i].title形式的调用
• 原有while循环条件逻辑错误，document.getElementsByClassName("box-head")返回的是元素集合，和字符串对比永远成立，会造成死循环
• 未初始化变量i，也没有做边界判断，容易出现下标越界报错

修正后完整代码 #

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var vt = JSON.parse(this.responseText);
    // 将JSON对象的值转换为数组，支持用v[i].title的形式访问
    var v = Object.values(vt);
    // 提前缓存DOM元素集合，避免每次循环重复查询提升性能
    var boxHref = document.getElementsByClassName("box-href");
    var boxImg = document.getElementsByClassName("box-img");
    var boxCat = document.getElementsByClassName("box-cat");
    var boxHead = document.getElementsByClassName("box-head");
    var boxDesc = document.getElementsByClassName("box-desc");
    var boxLikes = document.getElementsByClassName("box-likes");
    var boxAuthor = document.getElementsByClassName("box-author");
    // 初始化索引为数组最后一位，实现从下到上倒序遍历
    var i = v.length - 1;
    // 循环条件：索引大于等于0，且对应位置的DOM元素存在，避免越界报错
    while (i >= 0 && boxHead[i]) {
      let currentItem = v[i];
      boxHref[i].href = currentItem.link;
      boxImg[i].src = currentItem.img;
      boxCat[i].innerHTML = currentItem.categories[1];
      boxHead[i].innerHTML = currentItem.title;
      boxDesc[i].innerHTML = currentItem.description;                                
      boxLikes[i].innerHTML = currentItem.rating;
      boxAuthor[i].innerHTML = currentItem.author_name;
      boxAuthor[i].href = currentItem.author_link;
      // 索引减1，向前遍历
      i--;
    }               
  }
};
xhttp.open("GET", "https://www.global.cf/website-frontend/articles/articles.json", true);
xhttp.send();

实现说明 #

倒序遍历的顺序为：先读取JSON中排在后面的cat条目，再读取前面的sux27条目，完全符合你要求的从下到上遍历的需求，同时增加的边界判断可以避免HTML元素数量少于JSON条目数时出现报错。

内容的提问来源于stack exchange，提问作者Arc Official