how can I create an html article for each element in a javascript array

Question

i want to iterate a response and create an article section with each object

I have the following piece of code that makes the request:

$.ajax({
        type: "POST",
        url: "http://0.0.0.0:5001/api/v1/places_search/",
        data: JSON.stringify({}),
        dataType: 'json',
        contentType: "application/json",
        success: function (list_of_places) {
            for (let place of list_of_places) {
                $(".places").append("<article></article>");

                // title box
                $(".places article").append(`<div class="title_box">
                 <h2>${place['name']}</h2>
                 <div class="price_by_night">${place['price_by_night']}</div>
                 </div>`);
            }

        }

    });

here's a snippet of the html to edit:

<section class="places">
            <!-- <h1>Places</h1> -->
</section>

here's a screenshot of the result of the snippet:

How can I get only one object per article instead of all objects left in the iteration?

Rory McCrossan · Accepted Answer · 2022-11-02 14:55:59Z

1

The issue is because within your for loop, $(".places article") is selecting all elements matching that selector in the DOM, so you repeatedly append the new items to each one.

To fix this you can append() the content to the article you just created:

for (let place of list_of_places) {
  const $article = $('<article />').appendTo('.places');
  $article.append(`<div class="title_box"><h2>${place.name}</h2><div class="price_by_night">${place.price_by_night}</div></div>`);
}

Alternatively you can use map() instead of your for loop to create an array of HTML strings which you append to the DOM as a whole:

const html = list_of_places.map(place => `<article><div class="title_box"><h2>${place.name}</h2><div class="price_by_night">${place.price_by_night}</div></div></article>`);
$('.places').append(html);

answered Nov 2, 2022 at 14:55

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

traktor · Accepted Answer · 2022-11-02 15:03:02Z

1

Try

$(".places article").eq(-1).append(`<div class="title_box">...

based on this answer to How do I select a single element in jQuery? in conjunction looking up eq in jQuery docs.

answered Nov 2, 2022 at 15:03

traktor

19.7k5 gold badges37 silver badges56 bronze badges

Collectives™ on Stack Overflow

how can I create an html article for each element in a javascript array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related