Loop through list and insert into array of objects

Question

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 ]
]

You need to Object.create on every loop.

Bibberty
– Bibberty

2018-12-27 19:55:07 +00:00
Commented Dec 27, 2018 at 19:55 — Bibberty
– Bibberty, Commented Dec 27, 2018 at 19:55

Bibberty · Accepted Answer · 2018-12-27 19:58:06Z

1

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>

answered Dec 27, 2018 at 19:58

Bibberty

4,7762 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jackson Over a year ago

Thanks, $(this) is what was needed.

Uma · Accepted Answer · 2018-12-27 19:59:57Z

1

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'),
    });
});

answered Dec 27, 2018 at 19:59

Uma

8465 silver badges7 bronze badges

Comments

Yasin Tazeoglu · Accepted Answer · 2018-12-27 20:04:25Z

1

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

edited Dec 27, 2018 at 20:04

answered Dec 27, 2018 at 19:55

Yasin Tazeoglu

1,0249 silver badges18 bronze badges

Comments

compt · Accepted Answer · 2018-12-27 20:15:38Z

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".

FK82 · Accepted Answer · 2018-12-28 07:41:01Z

1

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);
});

edited Dec 28, 2018 at 7:41

answered Dec 27, 2018 at 19:57

FK82

5,0754 gold badges34 silver badges44 bronze badges

Collectives™ on Stack Overflow

Loop through list and insert into array of objects

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related