CODEWITHSUNDEEP
javascriptarrays
vygrdev
vygrdev

Reputation: 203

How do I loop through arrays within arrays?

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

Upvotes: 0

Views: 45

Answers (1)

Barmar
Barmar

Reputation: 780724

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>

Upvotes: 1

Related Questions