如何从 DOM 元素创建具有键和值的对象数组？

Question

How can I create an array of objects like this?

let cars = [
  {
    color: "purple",
    type: "minivan",
    capacity: 5
  },
  {
    color: "red",
    type: "suv",
    capacity: 5
  },
  {
    ...
  },
  ...
]

 let cars = []; $(".car").each(function() { var color = $(this).data('color'); var type = $(this).data('type'); var capacity = $(this).data('capacity'); cars.push(); });

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>

Answer 1

To achieve what you require you can use map() to build an array from all the data attributes on the elements:

 let cars = $('.car').map((i, el) => el.dataset).get(); console.log(cars);

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>

Answer 2

You are doing it right, you need to push the elements objects into the array

 let cars = []; $(".car").each(function() { var color = $(this).data('color'); var type = $(this).data('type'); var capacity = $(this).data('capacity'); cars.push({color, type, capacity}); }); console.log(cars)

 .car { background: gold; padding: 10px; margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="car" data-color="purple" data-type="minivan" data-capacity="5"> Car 1</div> <div class="car" data-color="red" data-type="suv" data-capacity="5"> Car 2</div> <div class="car" data-color="green" data-type="sedan" data-capacity="2"> Car 3</div>