JS Loop based on number of data in Array

Question

I want to make a loop in JS that creates a div for every "id" on my Array. For example, I have the following:

var Boletins =
{
    id:1, items:
    [
        {
            "#": "1",
            "Data": "19 a 25 de Março de 2021",
            "Região": "região de Trás-Os-Montes e Alto Douro",
            "Niveis": "muito elevados",
            "PoleneArvore": "cipreste, pinheiro",
            "PoleneErva": "urtiga, gramíneas"
        }],
    id:2, items:
        [
            {
                "#": "10",
                "Data": "26 de Março a 1 de Abril de 2021",
                "Região": "região de Trás-Os-Montes e Alto Douro",
                "Niveis": "muito elevados",
                "PoleneArvore": "plátano, cipreste, pinheiro, carvalhos"
            }
        ]
}

Based on the id, I want to make a loop that creates a Div in HTML for each entry of "id" present on the array. In my code it reaches id:14 but I only pasted until id:2. This is my code to create the divs:

htmlText += '<div class="divBoletim">';    
htmlText += '<p>Created Div</p>';             
htmlText += '</div>'; 
$('body').append(htmlText);

I'm just not understanding how I would make a loop for each id entry. Thanks in advance for those who help.

Your structure is not valid. You can not have same keys in same array level — Justinas
– Justinas, Commented Jul 7, 2021 at 9:13
Wrap each id and items to it's own object: Boletins = [{id: .., items: []}, {id: , items: []}...] — Justinas
– Justinas, Commented Jul 7, 2021 at 9:15
@Justinas Ok, fixing it now, thanks! But after that, how can I loop it then? — MMelo31
– MMelo31, Commented Jul 7, 2021 at 9:19
If there's only going to be one object in the items array don't use an array just have the object as the value of items. — Andy
– Andy, Commented Jul 7, 2021 at 9:21

Raffaele · Accepted Answer · 2021-07-07 09:52:13Z

1

With js you cannot use that structure, for the object Boletins, as for every object you can use just one attribute with name id and one attribute with the name items. If you use the structure you showed us in your code the object Boletins will contain just an attribute id (with value 2) and an attribute items. To loop as you'd like you need to use an array:

const boletins = [{
 id: 1,
 data: '19 a 25 de Março de 2021',
 ...
}, {
 id: 2,
 data: '...',
 ...
}];

Once you've defined the array with this code you can have a for loop:

for (let i=0; i<boletins.length; i++) {
  const item = boletins[i];
  console.log(item.data); // first way to get the info you need
  console.log(item['data']); // second way
  // do something
}

or using a forEach loop:


boletins.forEach(item => {
  console.log(item.data);
  console.log(item['data']);
  // do something.
});

You can access also directly to the elements by using:

const firstData = boletins[0].data;
const secondPoleneErva = boletins[1]['PoleneErva'];

I suggest you to use camel case for your variable names.

edited Jul 7, 2021 at 9:52

answered Jul 7, 2021 at 9:20

Raffaele

7678 silver badges23 bronze badges

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

2 Comments

MMelo31 Over a year ago

Thanks! Working now. Just something more, how can I access for example, the value of "Data" inside the items of id:1 ?

Raffaele Over a year ago

I've modified my answer to explain better how to use the arrays and the objects in js. If this is clear enough consider to click the grey check icon near my answer.

Collectives™ on Stack Overflow

JS Loop based on number of data in Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related