Reactjs : Adding element to array object in Json

Question

I have just started with reactjs and working on form component(formsy).I am trying to add and element to the existing array element but I am not able to do so. below is what I have tried and what I have got so far.

JSON Object -

{
   "details": {
       "someInnerObj": "v3",
       "innerObj": {
           "key1": "",
           "key2": ""
       },
       "ArrayObject": [{
               "type": "sometype",
               "somedesign": {
                   "A": "",
                   "B": "",
                   "C": "",
                   "D": ""
               },
               "somedev": {
                   "a": "",
                   "b": "",
                   "c": "",
                   "d": ""
               }
           }
       ],
       "code": "code",
       "isThis": "true"
   }
}

what i am trying to achieve here is adding and element to ArrayObject like below

"ArrayObject": [{
               "type": "sometype",
               "somedesign": {
                   "A": "",
                   "B": "",
                   "C": "",
                   "D": ""
               },
               "somedev": {
                   "a": "",
                   "b": "",
                   "c": "",
                   "d": ""
               }
           },
           {
               "type": "sometype1",
               "somedesing1": {
                   "A1": "",
                   "B1": "",
                   "C1": "",
                   "D1": ""
               },
               "somedev1": {
                   "a1": "",
                   "b1": "",
                   "c1": "",
                   "d1": ""
               }
           }
       ]

I am putting new element using the field value of json object as "details.ArrayObject[1]". but it instead of adding the new element is creating new key as given below and removing the existing -

"ArrayObject": {
            "[1]": {
                   "type": "sometype1",
                   "somedesing1": {
                       "A1": "",
                       "B1": "",
                       "C1": "",
                       "D1": ""
                   },
                   "somedev1": {
                       "a1": "",
                       "b1": "",
                       "c1": "",
                       "d1": ""
                   }
               }
        }

Could anyone please help out here ?

thanks.

Answer 1

What you need to do is

To Add to the array

var newItem1 = {
               "type": "sometype1",
               "somedesign": {
                   "A": "a1",
                   "B": "b1",
                   "C": "c1",
                   "D": "d1"
               },
               "somedev": {
                   "a": "aa1",
                   "b": "bb1",
                   "c": "cc1",
                   "d": "dd1"
               }
           }
var newItem2 = {
               "type": "sometype2",
               "somedesign": {
                   "A": "a2",
                   "B": "b2",
                   "C": "c2",
                   "D": "d2"
               },
               "somedev": {
                   "a": "aa2",
                   "b": "bb2",
                   "c": "cc2",
                   "d": "dd2"
               }
           }


 var data =
    {
       "details": {
           "someInnerObj": "v3",
           "innerObj": {
               "key1": "",
               "key2": ""
           },
           "ArrayObject": [newItem1,newItem2
           ],
           "code": "code",
           "isThis": "true"
       }
    }

Answer 2

Don't know if you used detials.ArrayObject[1]as accessor. There is a typo in details.

Try obj["details"]["ArrayObject"][1] to access is directly.

If you want to add an object you can use an array push on ArrayObject like ["details"]["ArrayObject"].push(yourObjectToAdd).

Answer 3

You can make use of spread operator syntax like

    const data = {
       "details": {
           "someInnerObj": "v3",
           "innerObj": {
               "key1": "",
               "key2": ""
           },
           "ArrayObject": [{
                   "type": "sometype",
                   "somedesign": {
                       "A": "",
                       "B": "",
                       "C": "",
                       "D": ""
                   },
                   "somedev": {
                       "a": "",
                       "b": "",
                       "c": "",
                       "d": ""
                   }
               }
           ],
           "code": "code",
           "isThis": "true"
       }
    }

    const newData = {
                   "type": "sometype1",
                   "somedesing1": {
                       "A1": "",
                       "B1": "",
                       "C1": "",
                       "D1": ""
                   },
                   "somedev1": {
                       "a1": "",
                       "b1": "",
                       "c1": "",
                       "d1": ""
                   }
               }
               
               
    const res = {
        ...data,
        details: {
            ...data.details,
            ArrayObject: [
              ...data.details.ArrayObject,
              newData
            ]
        }
    }

    console.log(res);