How do I loop through arrays within arrays?

Question

I am trying to dynamically create a series of bootstrap cards with returned AJAX data. The AJAX request brings back 12 arrays (see screenshot) but when I try to loop through them and put them on cards only 1 array gets put on all twelve cards (See screenshot)

I'm not sure what I am doing wrong with my loop but hoping someone can help out.

Here is the JS code (sorry about the super long line for the card creation - any advice on how to shorten that would be appreciated).

Below is a reproducible example (the actual data variable is filled by the AJAX call in my code), and here is the JSFiddle:

data = [["The Old Milk Bar", "  144 Dundas Street, Thornbury", "Lorem Ipsum"], ["Little Henri", "  848  High Street, Thornbury", 'Lorem Ipsum'], ["Northern Soul", "  843 High Street, Thornbury", "Lorem Ipsum"]]

window.addEventListener('load', (event) => {
    console.log('page is fully loaded');
    test(data)
    });
    
const test = function(data) {
  console.log(data)
  for (i = 0; i < data.length; i++) {
    var results = JSON.stringify(data).split('"');
    var cafeName = results[1].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeName)
    var cafeAddress = results[3].replace(/[^a-zA-Z0-9éè ]/g, "") + "," + results[2].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeAddress)
    var cafeDescription = results[5];
    console.log(cafeDescription)
    $(".venue-name").html(cafeName);
    $(".venue-address").html(cafeAddress);
    $(".venue-description").html(cafeDescription);
    $(".share").html('<i class="fas fa-share-alt"></i>');
    $(".venue-options").html('<i class="fas fa-ellipsis-h"></i>');
    var myCol = $('<div id="col"></div>');
    var myPanel = $(
      '<div class="card-group"><div class="card card-block m-3 overflow-auto" style="width: 18rem;"><div class="card-body"><h5 class="card-title venue-name"></h5><h6 class="card-subtitle mb-2 text-muted venue-address"></h6><div class="dropdown"><div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div><div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToList" class="dropdown-item" href="#">Add to List</a></div></div><div class="venue-description"></div></div></div></div>'
    );
    myPanel.appendTo(myCol);
    myCol.appendTo('#cardList');
  };
}

You're making things much harder than they need to be. Just use var cafeName = data[i][0]; — Barmar
– Barmar, Commented Mar 22, 2021 at 19:33
Did you notice that you never use i anywhere in the loop? What's the point of the loop if you don't use the iteration variable? — Barmar
– Barmar, Commented Mar 22, 2021 at 19:35
Hi thanks for the response. For some reason using i wasn't getting the result. I tried your suggestion in the fiddle and had the same problem with the repeating item. — vygrdev
– vygrdev, Commented Mar 22, 2021 at 19:41

Barmar · Accepted Answer · 2021-03-22 19:49:06Z

1

You don't need to call JSON.stringify() and split(). You already have an array, you can access its elements directly.

When you do $(".venue-name").html(cafeName) you're setting the HTML of all elements with that class, not the card you're creating. In fact, it sets every one except the new one, because you don't add that until after those lines.

Instead, create myPanel first, and then set the HTML of the elements within that DIV. You can do this with myPanel.find(".className") or equivalently $(".className", myPanel).

data = [
  ["The Old Milk Bar", "  144 Dundas Street, Thornbury", "Lorem Ipsum"],
  ["Little Henri", "  848  High Street, Thornbury", 'Lorem Ipsum'],
  ["Northern Soul", "  843 High Street, Thornbury", "Lorem Ipsum"]
]

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
  test(data)
});

const test = function(data) {
  console.log(data)
  data.forEach(([cafeName, cafeAddress, cafeDescription]) => {
    var myCol = $('<div id="col"></div>');
    var myPanel = $(
      `
      <div class="card-group">
        <div class="card card-block m-3 overflow-auto" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title venue-name"></h5>
            <h6 class="card-subtitle mb-2 text-muted venue-address"></h6>
            <div class="dropdown">
              <div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToList" class="dropdown-item" href="#">Add to List</a></div>
            </div>
            <div class="venue-description"></div>
          </div>
        </div>
      </div>`
    );
    $(".venue-name", myPanel).html(cafeName);
    $(".venue-address", myPanel).html(cafeAddress);
    $(".venue-description", myPanel).html(cafeDescription);
    $(".share", myPanel).html('<i class="fas fa-share-alt"></i>', myPanel);
    $(".venue-options", myPanel).html('<i class="fas fa-ellipsis-h"></i>');
    myPanel.appendTo(myCol);
    myCol.appendTo('#cardList');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cardList"></div>

edited Mar 22, 2021 at 19:49

answered Mar 22, 2021 at 19:42

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

2 Comments

vygrdev Over a year ago

Thank you, this did the job, and I really appreciate the clear explanation. I know it isn't the OP but do you have advice on how to make the long line of code in myPanel more readable? Thanks again.

Barmar Over a year ago

Use backticks instead of single quotes, then you can put newlines in it.

Collectives™ on Stack Overflow

How do I loop through arrays within arrays?

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