数组中未定义的值

Posted 2023-05-09

【中文标题】数组中未定义的值

【英文标题】：Undefined Value in Array

【发布时间】：2021-11-27 19:17:42

【问题描述】：

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);
      
      $.each(obj, function () 
          
        let voitures = new Voitures();
        voitures.code = obj["code_voiture"];
        voitures.marque = obj["marque"];
        voitures.couleur = obj["couleur"];
        voitures.cylindree = obj["cylindree"];

        
          let table = document.getElementById("table");
          
          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);
          nouvelleCellule.insertAdjacenthtml(
            "afterbegin",
            "<input type='button' id='button_modifier' value='Modifier'>"
          );
          nouvelleCellule.insertAdjacentHTML(
            "beforeend",
            "<input type='button' id='button_supprimer' 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/";

我正在尝试遍历数据（关于汽车，请参阅上面的链接），并将每辆汽车放入一个生成的表格中。它只适用于一辆车，但不适用于许多汽车。

为什么我得到“未定义”并且只有一辆车？

这是一个json数据的样本，一个12人的班级不断修改：

        "voitures": 
            "columns": [
                  "code_voiture",
                  "marque",
                  "couleur",
                  "cylindree"
            ],
            "records": [
               [
                    2,
                    "M2",
                    "C2",
                     112
               ],
               [
                    3,
                    "P",
                    "C",
                    110
               ],
           [...

Results

【问题讨论】：

能否提供 JSON 数据的示例？

@Rojo 是的：fbrc.esy.es/DWWM21050/Api/api.php/voitures

请edit您的问题并附上数据样本。 Stack Overflow 问题的关键之一是它们不会让你去其他网站只是为了弄清楚问题是什么，所以你知道它是否与你的匹配（如果你正在搜索）或者你是否足够了解它回答。

您不应该遍历obj.voitures.records 而不仅仅是obj吗？

我仍然不确定 =/

【参考方案1】：

您的响应数据结构与您的代码解析逻辑不匹配。您必须将数据拆分为列和记录。请查看以下示例代码。

let obj = JSON.parse(response);
const columns, records  = obj.voitures
const [code_name, marque_name, couleur_name, cylindree_name] = columns;

$.each(records, function (record) 
  const [code, marque, couleur, cylindree] = record;

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

您可以将代码简化如下：

fetch(carsUrl).then((response) => 
  console.log(response)
  const  columns, records  = response.voitures;
  const [code_name, marque_name, couleur_name, cylindree_name] = columns;
  let table = $("table");
  const thead = $(`<tr>
  <th>$code_name</th>
  <th>$marque_name</th>
  <th>$couleur_name</th>
  <th>$cylindree_name</th>
  </tr>`);
  table.append(thead);
  for (let record of records) 
    const [code, marque, couleur, cylindree] = record;
    const tr = $(`<tr>
    <th>$code</th>
    <th>$marque</th>
    <th>$couleur</th>
    <th>$cylindree</th>
    </tr>`);
    table.append(tr);
  
).catch(console.log);