looping over nested array to create elements with js/jquery-CodePudding

I come with a problem, I hope you can help me solve. I have already searched on this side quite a bit, but couldn't find an answer that solves my problem. I recently worked with looping over objects with jquery each and that worked fine. ATM I need to loop over entries of an array.

This is an example of how the array looks. It contains arrays, which themselves contain the src of an img and the title of the img.

var imgRef = [[http://127.0.0.1:5555/images/imgf0002.png, fig number 1],[http://127.0.0.1:5555/images/imgf0012.png, fig number 12]]

What I would like to do is to loop over the arrays and create a div for each entry. Inside the divs there should be an img containing the src of the other array and a p tag with the name. Then this will be appended to another element on the website.

<div>
  <img src="http://127.0.0.1:5555/images/imgf0002.png"> 
  <p>Fig number 1</p>
</div>
<div>
  <img src="http://127.0.0.1:5555/images/imgf0012.png"> 
  <p>Fig number 2</p>
</div>

I have started with this. Just to see whether I can loop over the entries, but it didn't work.

$.each(imgRef, function (index, value) {
    $('<div />', {
      'text': value
    }).appendTo('#localImg');
  });

CodePudding user response：

you've got to iterate over the array with arr.forEach((elem) => {}) or other iterator methods. Since each of elements of the main array, is an array of two elements, you can use array destructuring and use [url, title] instead of elem in the iterator function. Then in the body create the html string from title and url and append it into your target using $.append method.

let theArray = [["url1","title1"],["url2","title2"] /*,...*/];
theArray.forEach(([url, title]) => {
    $('#localImg').append(`<div>
  <img src="${url}"> 
  <p>${title}</p>
</div>`);
});

CodePudding user response：

var imgRef = [['http://127.0.0.1:5555/images/imgf0002.png', 'fig number 1'],['http://127.0.0.1:5555/images/imgf0012.png', 'fig number 12']]


$.each(imgRef, function (index, [src, text]) {
    // create the div element
    const div = $("<div></div>")
    // create the image and add src for it.
    const img = $('<img />', { 
      src,
     });
    // create the p element and add the text to it.
    const p = $('<p></p>', {
      text
    })
    // append both image and p in the div
    div.append([img, p])
    // then insert the block inside the localImage container.
    $('#localImg').append(div)
});

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

CodePudding user response：

    var imgRef = [['http://127.0.0.1:5555/images/imgf0002.png', 'fig number 1'],['http://127.0.0.1:5555/images/imgf0012.png', 'fig number 12']]
    $.each(imgRef, function(index, value){
        $('.localImg').append('<div><img src="' value[0] '"><p>' value[1] '</p></div>');
    });