Question

我有一个带有不同汽车的JSON对象，我通过循环将这些汽车中继到HTML，但是，每当我尝试使条件（<=）大于10时，就会引发错误。

这是我在汽车网站上进行的测试。

这是我的功能：

function dispCars(){
    let output = "";
    let i = 1;
    let maxNum = 10;
    while (i <= maxNum){
      const carName = cars["c" + i].name;
      const carMake = cars["c" + i].make;
      const carPrice = cars["c" + i].price;
      console.log(carName);
      output += "<div class='column'><div style='padding:0px;' class='ui segment'><a href='#'><img class='card-icon' src='../src/media/cars/" + i + ".jpg'></a><a href='#'><p class='heading'>"+ carMake + " " + carName + "</a><span class='price'>" + carPrice + "</span></p></div></div></div>";
      i++;
    }

    catalogue.innerHTML = output;
}

这里有一些JSON：

const cars = {
    "c1": {
        "id": 1,
        "name": "Sprinter Boxtruck",
        "make": "Mercedes",
        "price": "£500,000",
        "topspeed": "87mph",
        "vip": "false"
    },
    "c2": {
        "id": 2,
        "name": "RS4 Avant",
        "make": "Audi",
        "price": "£300,000",
        "topspeed": "101mph",
        "vip": "false"
    },
    "c3": {
        "id": 3,
        "name": "250 GTO",
        "make": "Ferrari",
        "price": "£350,000",
        "topspeed": "92mph",
        "vip": "false"
    },
    "c4": {
        "id": 4,
        "name": "Enzo",
        "make": "Ferrari",
        "price": "£3,500,000",
        "topspeed": "130mph",
        "vip": "false"
    }
    ,
    "c5": {
        "id": 5,
        "name": "F350 Superduty",
        "make": "Ford",
        "price": "£500,000",
        "topspeed": "80mph",
        "vip": "false"
    },
    "c6": {
        "id": 6,
        "name": "Focus SVT",
        "make": "Ford",
        "price": "£250,000",
        "topspeed": "81mph",
        "vip": "false"
    },
    "c7": {
        "id": 7,
        "name": "Mustang GT",
        "make": "Ford",
        "price": "£800,000",
        "topspeed": "87mph",
        "vip": "false"
    },
    "c8": {
        "id": 8,
        "name": "Raptor SVT",
        "make": "Ford",
        "price": "£500,000",
        "topspeed": "70mph",
        "vip": "false"
    },
    "c9": {
        "id": 9,
        "name": "Transit",
        "make": "Ford",
        "price": "£150,000",
        "topspeed": "87mph",
        "vip": "false"
    }
    ,
    "10": {
        "id": 10,
        "name": "E-Type",
        "make": "Jaguar",
        "price": "£250,000",
        "topspeed": "87mph",
        "vip": "false"
    },
    "c11": {
        "id": 11,
        "name": "F-Type",
        "make": "Mercedes",
        "price": "£600,000",
        "topspeed": "99mph",
        "vip": "false"
    },
    "c12": {
        "id": 12,
        "name": "Gallardo",
        "make": "Lamborghini",
        "price": "£2,500,000",
        "topspeed": "111mph",
        "vip": "false"
    },
...

这是引发的错误：

index.js:29 Uncaught TypeError: Cannot read property 'name' of undefined
    at dispCars (index.js:29)
    at index.js:40

我的预期结果是输出与输入相对应，例如如果我满足条件<=12，我希望它可以将12辆汽车中继到HTML。当条件低于10时，它可以很好地工作。实际结果是抛出错误。

Answer 1

使用 array 而不是对象：

const cars = [
    {
        "id": 1,
        "name": "Sprinter Boxtruck",
        "make": "Mercedes",
        "price": "£500,000",
        "topspeed": "87mph",
        "vip": "false"
    },
    {
        "id": 2,
        "name": "RS4 Avant",
        "make": "Audi",
        "price": "£300,000",
        "topspeed": "101mph",
        "vip": "false"
    },
    // ...
];

，然后使用for循环，for-of循环，forEach，map或其他array looping construct。由于您正在使用ES2015 +功能，因此for-of是最小的更改。您甚至可以使用解构，甚至可以使用模板文字：

function dispCars(){
    let output = "";
    for (const [index, {name, make, price}] of cars.entries()) {
      output += `<div class='column'><div style='padding:0px;' class='ui segment'><a href='#'><img class='card-icon' src='../src/media/cars/${index + 1}.jpg'></a><a href='#'><p class='heading'>${make} ${name}</a><span class='price'>${price}</span></p></div></div></div>`;
    }
    catalogue.innerHTML = output;
}

但是我可能会更进一步，使用map和join：

function dispCars(){
    catalogue.innerHTML = cars.map((index, {name, make, price}) =>
      `<div class='column'><div style='padding:0px;' class='ui segment'><a href='#'><img class='card-icon' src='../src/media/cars/${index + 1}.jpg'></a><a href='#'><p class='heading'>${make} ${name}</a><span class='price'>${price}</span></p></div></div></div>`
    ).join("");
}

尝试将while循环的范围设置为10以上时遇到错误

1 个答案: