CODEWITHSUNDEEP
javascriptjqueryarrays
Jackson
Jackson

Reputation: 483

Loop through list and insert into array of objects

I have a list like this:

<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

I want to loop over every element with the class 'category', get the data attributes, and insert those into an array. 

var categoryData = Object.create(null);
var myArray = [];

$('.category').each(function() {
    categoryData.categoryId = category.attr('data-categoryId');
    categoryData.parentCategoryId = category.attr('data-parentCategoryId');
    categoryData.childOrder = category.attr('data-child-order');
    categoryData.parentOrder = category.attr('data-parent-order');

    myArray.push(categoryData);
});

But currently it only grabs the data from the first element and then inserts that into the array multiple times.

[ 
    0 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    1 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    2 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ]
]

What I want is:

[ 
    0 => [ categoryId => 1, parentCategoryId => , childOrder => , parentOrder => 1 ], 
    1 => [ categoryId => 10, parentCategoryId => 1, childOrder => , parentOrder => 2 ], 
    2 => [ categoryId => 15, parentCategoryId => 2, childOrder => , parentOrder => 3 ]
]

Upvotes: 1

Views: 580

Answers (5)

FK82
FK82

Reputation: 5075

Objects are reference types.

In your loop, you're only setting properties of the same object categoryData instead of creating a new one.

So in the end, your array contains multiple references to the same object at every index. This is why you see the same values (of the last category element) on every element of your result array.

The solution is to create an object for each category element in the loop

$('.category').each(function() {
 const data = {
    categoryId: category.attr('data-categoryId'),
    parentCategoryId: category.attr('data-parentCategoryId'),
    childOrder: category.attr('data-child-order');
    parentOrder: category.attr('data-parent-order')
  };

  myArray.push(data);
});

Upvotes: 1

compt
compt

Reputation: 80

The code below will get you sorted:

var myArray = [];

$('.category').each(function() {
    let categoryData = Object.create(null);
    categoryData.categoryId = $(this).attr('data-categoryId');
    categoryData.parentCategoryId = $(this).attr('data-parentCategoryId');
    categoryData.childOrder = $(this).attr('data-child-order');
    categoryData.parentOrder = $(this).attr('data-parentOrder');
    myArray.push(categoryData);
});
console.log(myArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

Just make sure to insert your "childOrder" in your html, otherwise the result will keep showing "undefined".

Upvotes: 1

Yasin Tazeoglu
Yasin Tazeoglu

Reputation: 1004

var myArray = [];

$('.category').each(function() {
  var categoryId = $(this).attr('data-categoryId');
  var parentCategoryId = $(this).attr('data-parentCategoryId');
  var childOrder = $(this).attr('data-child-order');
  var parentOrder = $(this).attr('data-parent-order');

  myArray.push({categoryId , parentCategoryId ,childOrder,parentOrder  });
})

This might work

Upvotes: 1

Uma
Uma

Reputation: 846

you need to push a new object each time :)

$('.category').each(function() {
    myArray.push({
        categoryId: category.attr('data-categoryId'),
        parentCategoryId: category.attr('data-parentCategoryId'),
        childOrder: category.attr('data-child-order'),
        parentOrder: category.attr('data-parent-order'),
    });
});

Upvotes: 1

Bibberty
Bibberty

Reputation: 4768

Also needed to change ref to category

var myArray = [];

$('.category').each(function() {
    let categoryData = Object.create(null);
    categoryData.categoryId = $(this).attr('data-categoryId');
    categoryData.parentCategoryId = $(this).attr('data-parentCategoryId');
    categoryData.childOrder = $(this).attr('data-child-order');
    categoryData.parentOrder = $(this).attr('data-parent-order');

    myArray.push(categoryData);
});

console.log(myArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class='category parent-category' data-categoryId='1' data-parentCategoryId='' data-parentOrder='1'>
    <a href='/category/edit/1'>Business Basics</a>
</li>

<li class='category parent-category' data-categoryId='10' data-parentCategoryId='1' data-parentOrder='2'>
    <a href='/category/edit/10'>General/Legal</a>
</li>

<li class='category parent-category' data-categoryId='15' data-parentCategoryId='2' data-parentOrder='3'>
    <a href='/category/edit/15'>Home, Help &amp; Links</a>
</li>

Upvotes: 1

Related Questions