Ajax不断重写HTML

Question

On my html page there is some jquery that puts out a get request to a php page and then loops through the returned object and appends the table in the html.

At the bottom of the jquery is an ajax script that sends a value from the above jquery to another php page . This page ends up getting a value from amazon and sends it back to the html.

The problem is that if the number of objects/ items in the table is more than one , the ajax will overwrite itself in the html.

HTML

<table class="normal">
        <thead>
            <tr>
                <th>Image</th>
                <th style="width: 45%;">Item</th>
                <th>Argos Price</th>
                <th>Amazon Price</th>
                <th>URL</th>
            </tr>
        </thead>
    </table>

JS/AJAX

<script>           

        $.get("Extract_DataT2.php", function (data) {
            var JSON = jQuery.parseJSON(data); // it will be an object
            // loop through each item in the JSON object
            $.each(JSON.deals.items, function (index, value) {
                tr = $('<tr/>');
                tr.append("<td>" + "<img class='dealimg' src='" + value.deal_image + "' >" + "</td>");
                tr.append("<td>" + "<h3>" + value.title + "</h3>" + "<p>" + value.description + "</p>" + "</td>");
                //tr.append("<td>" + value.description + "</td>");
                tr.append("<td> £" + value.price + "</td>");
                tr.append("<td id='amazon'>Loading</td>");

                // take deal image url and remove unwanted bits
                // This means we have the product id to take us to the Argos website
                var str = value.deal_image;
                var res = str.match(/.*\/(.*)_1.jpg/);

  //more jquery here , but removed for stack. same as above

                // Add to table
                $('table').append(tr);

$.ajax({
  type: "POST",
  url: 'Task2.php',
    data: {pid:res[1]},
  success: function(data) {
    //alert(data);
      $("#amazon").html(data); 
      console.log( data );
 }
});

            });

        });
    </script>

Answer 1

It's wrong to give the same id to many elements. You should assign different id's (maybe you should concatenate with the product's id). This is causing your problem all the last "td" elements have the same id and js just picks the first one and assign the value you go from your request

Try this:

$.get("Extract_DataT2.php", function (data) {
    var JSON = jQuery.parseJSON(data); // it will be an object
    // loop through each item in the JSON object
    $.each(JSON.deals.items, function (index, value) {

        var str = value.deal_image;
        var res = str.match(/.*\/(.*)_1.jpg/);

        tr = $('<tr/>');
        tr.append("<td>" + "<img class='dealimg' src='" + value.deal_image + "' >" + "</td>");
        tr.append("<td>" + "<h3>" + value.title + "</h3>" + "<p>" + value.description + "</p>" + "</td>");
        tr.append("<td> £" + value.price + "</td>");
        tr.append("<td id='amazon_" + res + "'>Loading</td>");

        // Add to table
        $('table').append(tr);

        $.ajax({
            type: "POST",
            url: 'Task2.php',
            data: { pid: res[1] },
            success: function (data) {
                $("#amazon_" + res).html(data);
                console.log(data);
            }
        });

    });
});