The loop forEach in ajax is programmed to display only the final record

Question

The loop forEach in ajax is programmed to display only the final record

When making an AJAX request, only the last record from the loop is displayed. See the code snippet below:

$.ajax({
                   method: "POST",
                   url: "{{asset('/num')}}",
                   dataType: "json",
                   success: function (data) {
                       var inf;
                       var json_x = data;
                       json_x.forEach(function(item){
                           inf = '<p>'+ item['id'] +"</p>";
                       });
                       insTabl = document.getElementById('table');
                       insTabl.innerHTML = inf;

                   }
               });

This content is being sent into a div with the ID of 'table'.

javascript sql ajax

Answer 1

Answer №1

This particular line of code

inf = '<p>'+ item['id'] +"</p>";

is actually overwriting the value of inf with each iteration of the loop. Consequently, by the time the loop finishes running, inf only contains the data from the final round.

To address this issue, it is recommended to initialize inf as an empty string prior to starting the loop:

var inf = "";

Then, within the loop, replace the aforementioned line of code with the following one, which will add to the existing string:

inf += '<p>'+ item['id'] +"</p>";

By doing this, you will gradually build upon the HTML string during each iteration of the loop, resulting in a collection of paragraphs that align with your objective.

Answer 2

This particular line of code

inf = '<p>'+ item['id'] +"</p>";

is actually overwriting the value of inf with each iteration of the loop. Consequently, by the time the loop finishes running, inf only contains the data from the final round.

To address this issue, it is recommended to initialize inf as an empty string prior to starting the loop:

var inf = "";

Then, within the loop, replace the aforementioned line of code with the following one, which will add to the existing string:

inf += '<p>'+ item['id'] +"</p>";

By doing this, you will gradually build upon the HTML string during each iteration of the loop, resulting in a collection of paragraphs that align with your objective.

Answer 3

Answer №2

It seems like the issue lies in your loop where the inf variable is being overwritten with each pass. To avoid this, consider concatenating to your string on every iteration:

var inf = '';
var json_x = data;
json_x.forEach(function(item){
  inf += '<p>'+ item['id'] +"</p>";
});

Answer 4

It seems like the issue lies in your loop where the inf variable is being overwritten with each pass. To avoid this, consider concatenating to your string on every iteration:

var inf = '';
var json_x = data;
json_x.forEach(function(item){
  inf += '<p>'+ item['id'] +"</p>";
});

Answer 5

Answer №3

It seems like the issue lies in this particular line of code:

inf = '<p>'+ item['id'] +"</p>";

You are replacing the old value with the new one instead of appending it (which I assume is your intention). To resolve this, you can modify the code as follows:

let inf = ""; // It's recommended to use "let" over "var"

// Update the information in the callback:
inf += "<p>"+ item['id'] +"</p>";

Answer 6

It seems like the issue lies in this particular line of code:

inf = '<p>'+ item['id'] +"</p>";

You are replacing the old value with the new one instead of appending it (which I assume is your intention). To resolve this, you can modify the code as follows:

let inf = ""; // It's recommended to use "let" over "var"

// Update the information in the callback:
inf += "<p>"+ item['id'] +"</p>";

The loop forEach in ajax is programmed to display only the final record

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to include spaces in a JavaScript alert message?

The equivalent of an event listener in event handling

SQLite INTERVAL RANGE Display

The Ajax request is successful only on the second attempt

Using the `ng-repeat` directive as an argument in a Javascript function

Transferring data from AJAX to PHP

Clicking to fade in and out with jQuery on data attributes

Tips for optimizing AJAX content for Google indexing

Having trouble getting the generated component from Ionic v4 CLI to function properly

Exploring the front side of a cube using three.js

Encountering a problem while parsing JSON in Ruby: Uncaught exception 399 - unexpected token detected!

How can I extract a substring using jQuery?

Saving resources with a promise in Angular

How can you calculate the total time difference on a group using the SUM() function in MySQL?

How can I protect my jQuery script from being accessed by "FIREBUG"?

PHP - Real-time form validation?

Collaborative Desktop & Web Application powered by Javascript REST/Ajax

Change a single-row array to a multi-row array

ExpressJs does not support query parameters with the router.get method

Encountering a 404 error while using Node.js for app.get requests with Postgres as the