I am using below code to append some data which getting from api

for (i = 0; i < d.length; i++) {
    //alert(d[i].food_name);
    $('#myModal .modal-body').append("<span>" + 
          d[i].food_name + "</span><span>" + 
          d[i].redeem_code + "</span><span 
          class='food_price'>" + d[i].food_price + " 
         </span><span class='food-check'><input value=" + 
          d[i].food_id + " type='radio' redeem=" + 
          d[i].redeem_code + " food-price=" + 
          d[i].food_price + " food_name="+ d[i].food_name 
          + " name='food' class='select'></span><br>");
}

When the api is hitting second time the old data is also showing with new data. To solve this I tried with .html() but using this only the last record is showing. Please help. Not getting it.

I am using below code to append some data which getting from api

for (i = 0; i < d.length; i++) {
    //alert(d[i].food_name);
    $('#myModal .modal-body').append("<span>" + 
          d[i].food_name + "</span><span>" + 
          d[i].redeem_code + "</span><span 
          class='food_price'>" + d[i].food_price + " 
         </span><span class='food-check'><input value=" + 
          d[i].food_id + " type='radio' redeem=" + 
          d[i].redeem_code + " food-price=" + 
          d[i].food_price + " food_name="+ d[i].food_name 
          + " name='food' class='select'></span><br>");
}

When the api is hitting second time the old data is also showing with new data. To solve this I tried with .html() but using this only the last record is showing. Please help. Not getting it.

• javascript
• jquery
• html

• remove the append() and use html(). If you have more elements then give the $('#myModal .modal-body').html("") before starting the for loop – Karthi Keyan Commented Jun 4, 2018 at 10:10
• by html() the only last record is showing in modal – Sagar Kodte Commented Jun 4, 2018 at 10:11
• i edited my ment check it – Karthi Keyan Commented Jun 4, 2018 at 10:12
• @KarthiKeyan. I'm getting 6 records from the api when i use .html(). Only the last record from the api is showing. – Sagar Kodte Commented Jun 4, 2018 at 10:14
• either give .html("") before the loop or give .html("") if (i==0) – Karthi Keyan Commented Jun 4, 2018 at 10:21

4 Answers 4

You need to clear the html before you go into the loop. So keep the append, but use the below before the loop:

$('#myModal .modal-body').empty();

See this JSfiddle as an example.

use .empty() to empty content in a element

$('#myModal .modal-body').empty().append()

You can use replaceWith() method, it replaces selected elements with new content.

You need to store the html in a variable while iterating through and can replace the element.

let html = '';
for (i = 0; i < d.length; i++) {
    html += `<span> ${d[i].food_name} </span>
            <span> ${d[i].redeem_code}</span>
            <span class='food_price'> ${d[i].food_price} </span>
            <span class='food-check'>
                <input value=" ${d[i].food_id} type='radio' redeem='${d[i].redeem_code}' food-price= ${d[i].food_price} food_name="${d[i].food_name} name='food' class='select'>
            </span>
        <br>`
}
$('#myModal .modal-body').replaceWith(html);

Use .html("") instead of .html() to clear innerhtml of your selected DOM.

And about your question.

Var newHtml=" ";
For(loop)
{
newHtml= newHtml+ "your data[i]";
}
OldHtml.html(" ");

OldHtml.html(newHtml);

The above code will append new data to your html.