Loop through two arrays of objects Javascript

Question

so I want to load multiple cards into 1 div box, some with same css classes, some different, so I create one array of objects to load these different classes into them. In the mean time, I have other array of object including data to load too.

What I'm trying here is loops these 2 arrays in 1 for loop statement (same length by using same iterator) but one of them returned with undefined, can someone help me please, what am I doing wrong? (The code below is just a simple version of mine because the real one is really long)

<div id="recently-added" class="u-repeater">
// here to load multiple cards
</div>

var DB = [];

$.get(`http://localhost:8080/real-estate/monthly`, function(res) {
    DB.push(res);
}) 

load();

function load() {
    var card = '';
    var classNum = [
        { 'list': '1', 'text': '2'},
        { 'list': '2', 'text': '5'}
    ];
    for (let index = 0; index < classNum.length; index++) {
         var data = DB[index];
         card += 
            `
             <div class="u-list-item-${classNum[index].list}">
              <div class="u-container-layout-${classNum[index].list}">
              <img class="u-image-${classNum[index].list}">
              <p class="u-text">Click to select the text box</p>
              <h4 u-text-${classNum[index].text}">${data.title}</h4>
              <a class="u-btn-${classNum[index].list}">detail</a>
              </div>
            </div>
           `    
        }
    $("#recently-added").html(card);
}

The DB I took from ajax call and it somehome looks like this:

var DB = [
 {'id': 1350, 'title': '2-room apartment with pool view', 'type': 0, 'request': 0},
 {'id': 1351, 'title': 'newly built house', 'type': 0, 'request': 1}
];

As I watched them through console, the data variable returned undefined https://i.sstatic.net/06WTs.jpg

This is kind of the result I expect: https://i.sstatic.net/3WfMk.jpg

oh yea, thanks bud! I fixed it but the point is the data showed undefined itself from the beginning — berries
– berries, Commented Sep 10, 2022 at 5:54
Works for me.I had to put a comma in after first array element of DB, but data is not undefined. ${data[index].title} will give you a " (reading 'title') at load (c:\work\projects\" error though — Dave Pile
– Dave Pile, Commented Sep 10, 2022 at 6:04
@DavePile I just updated my question, I think it might be because of the ajax call not finish when the load() function runs? — berries
– berries, Commented Sep 10, 2022 at 6:04

Dave Pile · Accepted Answer · 2022-09-10 06:18:19Z

2

$.get(`http://localhost:8080/real-estate/monthly`, function(res) {
    
    load(res.data);     // or however your get call returns the atual array you want
}) 



function load(DB) {
var card = '';
var classNum = [
    { 'list': '1', 'text': '2'},
    { 'list': '2', 'text': '5'}
];

// note that now you are checking two arrays using the length of only one array
// and you dont control the other array, 
//so this will likely cause you problems if only 1 element is returned from 
// the get call

for (let index = 0; index < classNum.length; index++) {

     var data = DB[index];
     card += 
        `
         <div class="u-list-item-${classNum[index].list}">
          <div class="u-container-layout-${classNum[index].list}">
          <img class="u-image-${classNum[index].list}">
          <p class="u-text">Click to select the text box</p>
          <h4 u-text-${classNum[index].text}">${data.title}</h4>
          <a class="u-btn-${classNum[index].list}">detail</a>
          </div>
        </div>
       `    
    }
$("#recently-added").html(card);

}

answered Sep 10, 2022 at 6:18

Dave Pile

5,8344 gold badges38 silver badges52 bronze badges

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

2 Comments

knittl Over a year ago

Yes, that's even better. Now load does not depend on external, shared state. It receives all its input via the argument list

berries Over a year ago

Thanks Dave, it works! I mean I kept making the same mistake with the ajax call but still didn't figure out myself, still learning everyday from amazing guys like you, here!

vladatr · Accepted Answer · 2022-09-10 06:16:32Z

0

Try this one - call load() only after fetching results:

$.get(`http://localhost:8080/real-estate/monthly`, function(res) {
    DB.push(res);
    load();
})

answered Sep 10, 2022 at 6:16

vladatr

6266 silver badges15 bronze badges

Collectives™ on Stack Overflow

Loop through two arrays of objects Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related