CODEWITHSUNDEEP
javascriptjqueryarraysloopsclosures
Human Bot
Human Bot

Reputation: 55

Javascript add object to an oustide array in a loop

I'm trying to add dynamically created Javascript object to an array. I could traverse the DOM & creating the objects. But when displaying the final array of Objects, the count is correct but all objects are of same value ie, final index value. How to get rid of this problem?

PS: DOM traversal & other functionalities work well & only problem with creating the final array of objects with correct values.

Javascript Code.

var match = {};

var matches = [];

$('.SIsort').each(function (i, v) {
      console.log("type.."+typeof matches);
      var date = $(this).find('td:eq(0)').find('meta')[0].content;
      var team1 = $(this).find('td:eq(1)').find('div:eq(1)').text();
      var team2 = $(this).find('td:eq(1)').find('div:eq(3)').text();
      var loc = $(this).find('td:eq(2)').find('div:eq(0)').text();

      match.date = date;
      match.team1 = team1;
      match.team2 = team2;
      match.venue = loc;

      console.log(match); // It displays Correctly

      (matches = window.matches || []).push({});
      matches = (window.matches || []).push(match);
     // console.log(matches[i])

});

console.log(matches); // All object values belong only to final index

Upvotes: 3

Views: 9127

Answers (2)

Arkantos
Arkantos

Reputation: 6608

The problem with your code is that you're creating only ONE instance of match outside of your loop and updating the same object in each iteration before adding it to your Array. Actually you're supposed to create a NEW object, every time you want to add an entry to your loop, so create a new object at the starting of the loop like below.

var matches = [];

$('.SIsort').each(function (i, v) {
   var match = {};
   // update match object and add to array
   matches.push(match);
}

That should do it :)

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075705

You're repeatedly pushing the same object into the array.

Move your

var match = {};

...line into the loop so that you create a new object each time.

Also, I'm not sure what you're trying to achieve with this:

(matches = window.matches || []).push({});
matches = (window.matches || []).push(match);

But you just want:

matches.push(match);

Here's a minimal example of what you're doing:

var match = {};
var i;
for (i = 0; i < 5; ++i) {
    match.i = i;         // Overwrites the previous `i` value on subsequent loops
    matches.push(match); // Pushes the *same object* onto the array
}
console.log(matches);    // Shows the same object, all with `i = 4`

Instead, create a new object each time:

var i;
for (i = 0; i < 5; ++i) {
    var match = {};     // Creates a new object
    match.i = i;
    matches.push(match);
}
console.log(matches);

Applying that to your code:

var matches = [];

$('.SIsort').each(function (i, v) {
      console.log("type.."+typeof matches);
      var date = $(this).find('td:eq(0)').find('meta')[0].content;
      var team1 = $(this).find('td:eq(1)').find('div:eq(1)').text();
      var team2 = $(this).find('td:eq(1)').find('div:eq(3)').text();
      var loc = $(this).find('td:eq(2)').find('div:eq(0)').text();

      var match = {};
      match.date = date;
      match.team1 = team1;
      match.team2 = team2;
      match.venue = loc;

      console.log(match); // It displays Correctly

      matches.push(match);
});

console.log(matches);

Side note: These lines:

var match = {};
match.date = date;
match.team1 = team1;
match.team2 = team2;
match.venue = loc;

console.log(match); // It displays Correctly

matches.push(match);

can be combined into:

var match = {
    date: date,
    team1: team1,
    team2: team2,
    venue: loc
};

console.log(match); // It displays Correctly

matches.push(match);

Upvotes: 3

Related Questions