javascript - 显示数组中的特定属性

Question

我有一系列具有不同属性的汽车。我一直在尝试创建一个在按下按钮时仅显示小型货车的功能。按下按钮时我无法显示任何内容。当我运行完整的程序时，我没有收到任何错误。关于我做错了什么的任何提示都会非常有帮助!

// Define  car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, 
car_price, car_mileage) {
    this.stockid = id;
    this.make = car_make;
    this.model = car_model;
    this.year = car_year;
    this.type = car_type;
    this.color = car_color;
    this.price = car_price;
    this.mileage = car_mileage;
}


// Declare an array of Car objects
var car_list = [];

// Create an instance of the Car object and add it to the car_list array
   car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 
      17555, 55060));
   car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 
      15575, 20350));
   car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 
      15775, 70000));
   car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "Hatchback", 
      "Red", 104250, 10567));
   car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 
      13370, 35000));
   car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", 
      "Silver", 18555, 55060));
   car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 
      13575, 90350));
   car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 
      25775, 70000));
   car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 
      30250, 17567));
   car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 
      3500));
   car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 
      354370, 5500));
   car_list.push(new Car(4002, "Audi", "R8", 2012, "convertible", "Black", 
      181370, 4500));
// Display car list

for (var i=0; i<car_list.length; i++){
    var this_element = "<tr class='car-item' id='l-"+i+"' >" ;
    this_element += "<td>" + car_list[i].stockid + "</td><td>" + 
car_list[i].make + "</td>";
    this_element += "<td>" + car_list[i].model + "</td><td>" + 
car_list[i].year + "</td><td>" + car_list[i].type + "</td>";
    this_element += "<td>" + car_list[i].color + "</td><td> $" + 
car_list[i].price + "</td>";
    this_element += "<td>" + car_list[i].mileage + "</td>";
    this_element += "<td><button type='button'  data-index='"+i+"' 
class='addme btn btn-primary' ";
    this_element +=  "data-stockid='"+ car_list[i].stockid + "'>Add</button>
</td></tr>";

    $("#car-list").append(this_element);
}

//display minivans
$('#p3').on('click', function(){

  if(type = "Minivan"){

     var thisButton = $(this);
     var index = thisButton.data('index');
     var thisCar = car_list[index];

  var newRow = "<tr><td>"+ thisCar.stockid + "</td><td>" + thisCar.make + "
  </td><td>" + thisCar.model + "</td><td>" + thisCar.year + 
    "</td><td>" + thisCar.type + "</td><td>" + thisCar.color + "</td><td>" + 
     thisCar.price + "</td><td>" + thisCar.mileage + "</td></tr>";

  $('#minivan-list').append(newRow);
 }

});

Answer 1

如果您想获取“Minivan”类型的列表，则必须循环遍历 car_list 数组。

for ( var key in car_list ) {
    if ( car_list[ key ].type == "Minivan" ) console.log( car_list[ key ] );
}

如果您想将所有小型货车附加到#minivan-list

var html = ""

for ( var key in car_list ) {
    if ( car_list[ key ].type == "Minivan" ) {
        html += "<tr><td>"+ car_list[ key ].stockid + "</td><td>" + car_list[ key ].make + "</td><td>" + car_list[ key ].model + "</td><td>" + car_list[ key ].year + "</td><td>" + car_list[ key ].type + "</td><td>" + car_list[ key ].color + "</td><td>" + car_list[ key ].price + "</td><td>" + car_list[ key ].mileage + "</td></tr>";
    }
}

$('#minivan-list').append( html );