React push object into array, always pushed last array

Question

i'm new on React Js things. already tried push object into array.

I already got the result using axios, but i can't push it to array.the result always return last array, F.ex : [0]: {channel:"esl_dota2", stream:null},[1]: {channel:"esl_dota2", stream:null},[2]: {channel:"esl_dota2", stream:null},[3]: {channel:"esl_dota2", stream:null},[4]: {channel:"esl_dota2", stream:null},

GetStream(){
var channels = ['comster404', 'freecodecamp', 'noobs2ninjas', 'esl_dota2', 'ESL_SC2'];
var temp = [];
var tempObj = {};

channels.map((i) => {
  axios({
    url: this.state.API_URL + i
  })
  .then(yeah => {         
    console.log(i);
    tempObj.channel = i;
    tempObj.stream = yeah.data.stream;      
    temp.push(tempObj);               
  })
  .catch(oops => {
    console.log(oops.status);
  });
});

console.log(temp);}

m.rohail.akram · Accepted Answer · 2017-05-11 13:34:11Z

1

You are adding tempObj to temp array on each iteration and changing value of tempObj as well.

So by reference you are updating value of each item because all items of array point to same object.

answered May 11, 2017 at 13:34

m.rohail.akram

3501 silver badge11 bronze badges

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

Comments

Aniruddha Shevle · Accepted Answer · 2017-05-11 12:05:22Z

0

Just declare var tempObj = {}; inside your map method. That will help you.

answered May 11, 2017 at 12:05

Aniruddha Shevle

4,9694 gold badges28 silver badges40 bronze badges

2 Comments

andi hakim Over a year ago

Perfect. can u little bit describe why previos code didn't work?

Aniruddha Shevle Over a year ago

Firstly Object and Array are referenced type. You've declared tempObj in the local scope at the start. So if you console it after the map method, it'll give you last values stored in tempObj ie {channel:"esl_dota2", stream:null} because of the same keys. As Array is the referenced type, it'll have the values as that of tempObj does ie {channel:"esl_dota2", stream:null} locally. If you declare and initialize tempObj inside map method, for the 1st run, tempObj will store 1st key & value pairs and push it in the array then in the 2nd run tempObj will be reinitialize to empty again and so on..

Giang Le · Accepted Answer · 2017-05-11 10:48:33Z

0

Try unshift() instead push() to adds item to front of array

answered May 11, 2017 at 10:48

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

Collectives™ on Stack Overflow

React push object into array, always pushed last array

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related