Accessing JSON object after Update

Question

I am working with React.js and YouTube API. I get a collection of objects from the API but I want to add a 'check' field to every object. I used the below code -

await axios.get('https://youtube.googleapis.com/youtube/v3/search', {
  params: {
    part: 'snippet',
    q: sTerm,
    type: 'video',
    key: KEY
  },
})
.then(response => {
   let i=0;
   response.data.items.forEach(item=>{
     response.data.items[i]['check']=true
     i++;
   })
   console.log(response.data.items)                //gives correct output with check field
   console.log(response.data.items[0].check)       //gives undefined instead of true
   console.log(response.data.items[0]['check'])    //gives undefined instead of true
 })

What should I do to access the 'check' field value?

Update: This is my response

Finally what worked for me is creating a new array as suggested by a now deleted answer.

.then((response) => {
  myItems=response.data.items.map(
    item => ({...item, check: true})
  );
console.log(myItems);

You are not really using [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) correctly; you are sort of conflating it with a plain `for` loop. You don't actually have any need for the iterator `i` in this `forEach`, but if it was really crucial it _is_ passed as the second argument to the `forEach` callback. It would be helpful if you included an example of your response data structure. — Alexander Nied, Aug 04 '21 at 16:47
[There is no such thing as a JSON object](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). `response.data` is just an object. Yes, it was parsed from JSON by axios somewhere along the line, but it's still just an object. — Heretic Monkey, Aug 04 '21 at 17:02
you set the value IN the response? seems odd `response.data.items[i]['check']=true` — Mark Schultheiss, Aug 04 '21 at 17:05
Does this answer your question? [change values in array when doing foreach](https://stackoverflow.com/questions/12482961/change-values-in-array-when-doing-foreach) — Mark Schultheiss, Aug 04 '21 at 17:13

score 1 · Accepted Answer · answered Aug 04 '21 at 16:59

1

You can use javascripts Array.prototype.map instead of forEach to transform every value in your items array:

.then(response => 
  response.data.items.map(
    item => ({...item, check: true})
  )
)

This should return on the top line where you are awaiting the axios call the array of items where each item.check equals true.

answered Aug 04 '21 at 16:59

Chan Youn

782
7
10

Please guide me on how to simultaneously perform a function on item and add check field. Something like `response.data.items.map(item=>{var x=!item.bool; return {...item, check: x}})` – Surbhi Goel Aug 04 '21 at 20:39
I'm not sure I understand your request fully. Its just an anonymous function that works for a single item in the array. What you have should be fine if you want `check` to equal `!item.bool`. An alternative is to just set the value on the returned object itself `(item) => ({...item, check: !item.bool})`. Although with this function, you might have to be careful if `item.bool` has any `undefined` values. – Chan Youn Aug 04 '21 at 20:50

Accessing JSON object after Update

1 Answers1