CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

How to create array of objects with key & value from DOM element?

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>

Upvotes: 2

Views: 578

Answers (2)

Marik Ishtar
Marik Ishtar

Reputation: 3049

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

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>

Upvotes: 2

Related Questions