JS遍历汽车API返回JSON生成表格出现undefined及仅渲染单条数据问题

问题原因 #

• 遍历目标错误：接口返回的根对象中，所有汽车数据实际存放在 obj.voitures.records 数组里，你直接遍历根对象obj，根对象仅包含voitures一个属性，所以循环只会执行1次，只能渲染出一条数据。
• 取值逻辑错误：
  1. 循环内始终读取外层obj的属性，没有读取当前遍历到的单条汽车数据
  2. 接口返回的单条汽车数据为数组格式，顺序和columns字段定义的字段顺序一一对应，并非键值对对象，直接用obj["code_voiture"]这类方式取值必然返回undefined。
• 回调未接收遍历参数：$.each的回调函数需要接收「索引、当前遍历元素」两个参数，你没有声明这两个参数，无法拿到当前循环对应的单条汽车数据。

修正后代码 #

class Voitures {
  code = 0;
  marque = "";
  couleur = "";
  cylindree = 0;

  constructor(code = 0, marque = "", couleur = "", cylindree = 0) {
    this.code = code;
    this.marque = marque;
    this.couleur = couleur;
    this.cylindree = cylindree;
  }
}

$(document).ready(function () {
  $("#go").click(function () {
    get(carsUrl, function (response) {
      
      let obj = JSON.parse(response);
      // 提取真实的汽车数据数组
      const carRecords = obj.voitures.records;
      const table = document.getElementById("table");
      // 遍历汽车数据数组
      $.each(carRecords, function (index, item) {
        // 按columns顺序从数组中取值
        let voitures = new Voitures(
          item[0], // 对应code_voiture
          item[1], // 对应marque
          item[2], // 对应couleur
          item[3]  // 对应cylindree
        );

        let nouvelleRangee = table.insertRow(-1);
        let nouvelleCellule = nouvelleRangee.insertCell(0);
        let nouveauTexte = document.createTextNode(voitures.code);
        nouvelleCellule.appendChild(nouveauTexte);

        nouvelleCellule = nouvelleRangee.insertCell(1);
        nouveauTexte = document.createTextNode(voitures.marque);
        nouvelleCellule.appendChild(nouveauTexte);

        nouvelleCellule = nouvelleRangee.insertCell(2);
        nouveauTexte = document.createTextNode(voitures.couleur);
        nouvelleCellule.appendChild(nouveauTexte);

        nouvelleCellule = nouvelleRangee.insertCell(3);
        nouveauTexte = document.createTextNode(voitures.cylindree);
        nouvelleCellule.appendChild(nouveauTexte);

        nouvelleCellule = nouvelleRangee.insertCell(4);
        // 给按钮增加唯一标识，避免重复ID不符合HTML规范
        nouvelleCellule.insertAdjacentHTML(
          "afterbegin",
          `<input type='button' id='button_modifier_${voitures.code}' value='Modifier'>`
        );
        nouvelleCellule.insertAdjacentHTML(
          "beforeend",
          `<input type='button' id='button_supprimer_${voitures.code}' value='Supprimer'>`
        );
      });
    },
    function () {
      alert("Erreur Ajax.");
      throw new Error("Ya un problème, chef.");
    }
    );
  });
});

let carsUrl = "http://fbrc.esy.es/DWWM21050/Api/api.php/voitures/";

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