Create a new array based on array object data

Question

I have a nested objects in arrays.

{
  "page": [
    {
      "num": "1",
      "comp": [
        {
        "foo": "bar",
        "bar": "foo",
        "name": "comp1",
          "items": [
            {
              "fooBar":"barFoo",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "2",
      "comp": [
        {
        "foo": "bar",
        "bar": "foo",
        "name": "comp2",
          "items": [
            {
              "fooBar":"barFoo",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        },
        {
          "items": [
            {
              "fooBar":"barFoo2",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            },
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "3"
    }
  ]
}

So what I'm trying to do is create a new array with itemData but keep the general structure of the object intact.

I can't just delete every key/values not needed cause the key can change or new ones can be added and it would be hard to maintain. So I was thinking of a few nested for loops to get to the itemData object:

for (const [i, page] of this.testingAnimation.pages.entries()){
                for (const [j, comp] of page.comp.entries()){
                    for (const [k, item] of comp.items.entries()){
                        if (item.itemData !== undefined) {
                            
                        } else {

                        }
                    }
                }
            }

but now that I have itemData how do I put it in the array while keep the general nested structure of the original object just without the extra key/values

expected Output:

{
  "page": [
    {
      "comp": [
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
            }
          ]
        }
      ]
    },
    {
      "comp": [
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        },
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            },
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "3"
    }
  ]
}

Answer 1

How about you replace your inner loop (the for (const [k, item] of comp.items.entries()) {...} part) with this:

comp.items = comp.items.map(item => ({ itemData: item.itemDate }));

That will just replace each comp.items array with a new array, where each object only has the single key you want to keep.

If you don't actually want to modify the data in-place (ie, create a new data structure with the desired structure, and leave alone the original), you can use something like the following:

const filtered = {
  ...this.testingAnimation,
  page: this.testingAnimation.page.map(page =>
    'comp' in page
      ? {
        ...page,
        comp: page.comp.map(comp =>
          'items' in comp
            ? {
              ...comp,
              items: comp.items.map(item => ({ itemData: item.itemData }))
            }
            : comp
          )
      }
      : page
  )
}

Note: this solution is not using Object.entries() , but if you want to use that, you should use the standard-compliant Object.entries(someObject) because in general, someObject.entries() is not defined. Also, for arrays, this function can be used, but in general it makes more sense to use someArray.forEach(...) or newArray = someArray.map(item => ...) . MDN is a great resource for more help.