How to append data to nested array elements

Question

I am trying to add data to nested array and already tried out many stackoverflow links to solve out this problem but failed to do so.

Original Data:

cuisine: [
                    [
                        "Middle Eastern",
                        4
                    ],
                    [
                        "Western",
                        4
                    ],
                    [
                        "Pasta Dishes",
                        2
                    ],
                    [
                        "Salad",
                        2
                    ],
                    [
                        "Mexican",
                        1
                    ],
                    [
                        "Soup",
                        1
                    ],
                    [
                        "snacks",
                        1
                    ]
                ],

Desired Data:

cuisine: [
                    [
                        1
                        false
                        "Middle Eastern",
                        4
                    ],
                    [
                        2
                        false
                        "Western",
                        4
                    ],
                    [
                        3
                        false
                        "Pasta Dishes",
                        2
                    ],
                    [
                        "Salad",
                        2
                    ],
                    [
                        4
                        false
                        "Mexican",
                        1
                    ],
                    [
                        5
                        false
                        "Soup",
                        1
                    ],
                    [
                        6
                        false
                        "snacks",
                        1
                    ]
                ],

My code

  this.setState({ cousineArray: cuisine }, () => {
    this.addValuesToArray(this.state.cousineArray);
  });


  addValuesToArray = commingArray => {
    console.warn(commingArray);
    if (commingArray !== null && commingArray !== undefined) {
      for (i = 0; i < commingArray.length; i++) {
        this.setState(
          {
            commingArray: this.state.commingArray.push(i, false)
          },
          () => {
            console.log("Coming Array ==> ", commingArray[1]);
          }
        );
      }
    }

};

but its not working and throwing following error

Cannot read property 'push' of undefined

What thing I am doing wrong. please tell me the better way if this is not well way to do this. Thanks

It looks like you should use an array of a particular type rather than an unstructured 2D array. Unless you're limited to working with that structure by a 3rd party! — Oliver
– Oliver, Commented Oct 1, 2019 at 10:26

Clarity · Accepted Answer · 2019-10-01 10:26:48Z

2

Do not set state in a loop, also use map to properly set values to your nested array:

addValuesToArray = commingArray => {
  console.warn(commingArray);
  if (commingArray !== null && commingArray !== undefined) {
    const res = commingArray.map(arr => {
      return arr.map((innerArr, i) => {
        return [...innerArr, i, false]
      })
    })

    this.setState({
        commingArray: res
      },
      () => {
        console.log("Coming Array ==> ", commingArray);
      }
    );
  }
}

answered Oct 1, 2019 at 10:26

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

Comments

ellipsis · Accepted Answer · 2019-10-01 10:42:28Z

1

Use forEach loop to push values in the array using your own logic

var cuisine= [
  [
    "Middle Eastern",
    4
  ],
  [
    "Western",
    4
  ],
  [
    "Pasta Dishes",
    2
  ],
  [
    "Salad",
    2
  ],
  [
    "Mexican",
    1
  ],
  [
    "Soup",
    1
  ],
  [
    "snacks",
    1
  ]
]
cuisine.forEach(function(e,j){
e.unshift(false)
e.unshift(j)
e.unshift({key:'value'})
})
console.log(cuisine)

edited Oct 1, 2019 at 10:42

answered Oct 1, 2019 at 10:25

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

5 Comments

Adeel Iftikhar Over a year ago

can we also add key to the newly added values like e.push("checked",false) and e.push("id",j)?

ellipsis Over a year ago

Keys value pairs can be added to objects which support it. Array do not support key value pairings

ellipsis Over a year ago

However you can add objects in the array. Check edits

Adeel Iftikhar Over a year ago

How to achieve this?

Adeel Iftikhar Over a year ago

Can we add newly added values at the start instead of at the end?

Collectives™ on Stack Overflow

How to append data to nested array elements

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related