React Js array manipulation

Question

hope you are doing fine i came across to a problem of data array manipulation at starting there was not much manipulation required as work progressed now more data manipulation is required and i am running short on this(as a fresher early days of my career problem explanation - as data i am receiving an array of object and each object contains another array of information (key-value pair) and that array also contains another array of information(key value pair ) and requirement is to i have to loop main data object-item with respect to length of deep nested array and display them on front except this i have done the most part. i am attaching a sample code of my problem below i am requesting you guys to provide solution for this issue

`

import React, { useState } from "react";

const data = [
  {
    id: 1,
    name: "Something Goes here",
    address: "Earth",
    arr1: [
      {
        newId: 1,
        title: "Title 1",
        midName: "Nothing",
        arr2: [
          {
            subId: 1,
            goes: "Hello",
            ollo: "Not what you think",
          },
          {
            subId: 2,
            goes: "Hello 2",
            ollo: "Not what you",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Something Goes",
    address: "Mars",
    arr1: [
      {
        newId: 3,
        title: "Title sddsdsad",
        midName: "Nothing",
        arr2: [
          {
            subId: 2,
            goes: "Hello adasdasdasd",
            ollo: "Not what you think asdasdasdawd",
          },
          {
            subId: 2,
            goes: "Hello 2",
            ollo: "Not what you asdasasd",
          },
        ],
      },
    ],
  },
];

const App = () => {
  const [dummy, setDummy] = useState([]);
  let dummyArr = [],
    tempObj,
    temp;
  const tempFunc = () => {
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data[i].arr1; j++) {
        for (let k = 0; k < data[i].arr1[j].arr2; k++) {
          temp = data[i].arr1[j].arr2[k];
          delete data[i].arr1[j].arr2[k];
          tempObj = { ...temp ,...data[i], };
          dummyArr.push(tempObj);
          tempObj = {};
          console("tempObj -->", tempObj);
        }
      }
    }
  };
  console.log("dummyArr", dummyArr);
  return (
    <React.Fragment>
      <button>Hello oooo</button>
    </React.Fragment>
  );
};

export default App;

expected result is to have both arrays pushed into main itemObject `

const sampleArray = [
  {
    id: 2,
    name: "Something Goes",
    address: "Mars",
    newId: 3,
    title: "Title sddsdsad",
    midName: "Nothing",
    subId: 2,
    goes: "Hello adasdasdasd",
    ollo: "Not what you think asdasdasdawd",
  },
];

Answer 1

This code can help you achieve a nested level of any key array and make its single level of array list with extract the keys of non-array value.

The above answer is only limited to nested, but this code is not limited to level what you have and what key has an array value it will iterate and n level of tress

Thanks

const data = [
  {
    id: 1,
    name: "Something Goes here",
    address: "Earth",
    arr1: [
      {
        newId: 1,
        title: "Title 1",
        midName: "Nothing",
        arr2: [
          {
            subId: 1,
            goes: "Hello",
            ollo: "Not what you think",
          },
          {
            subId: 2,
            goes: "Hello 2",
            ollo: "Not what you",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Something Goes",
    address: "Mars",
    arr1: [
      {
        newId: 3,
        title: "Title sddsdsad",
        midName: "Nothing",
        arr2: [
          {
            subId: 2,
            goes: "Hello adasdasdasd",
            ollo: "Not what you think asdasdasdawd",
          },
          {
            subId: 2,
            goes: "Hello 2",
            ollo: "Not what you asdasasd",
          },
        ],
      },
       {
        newId: 4,
        title: "Title sddsdsad1",
        midName: "Nothing",
        arr2: [
          {
            subId: 2,
            goes: "Hello adasdasdasd",
            ollo: "Not what you think asdasdasdawd",
          },
          {
            subId: 2,
            goes: "Hello 2",
            ollo: "Not what you asdasasd",
          },
        ],
      },
    ],
  },
];

function getArrayHasValue(obj) {
  const keys = Object.keys(obj).filter(accu => Array.isArray(obj[accu]))
  return keys[0] ? keys[0] : null;
}

function getObjecNoNested(obj) {
  const keys = Object.keys(obj).filter(accu => !Array.isArray(obj[accu]))
  return keys
}

function unwindArray(arr, queue,ref) {
  for (let i of arr) {
    const nestedArrayKayname = getArrayHasValue(i)
    const nonNestedKeys = getObjecNoNested(i)
    
    ref = JSON.parse(JSON.stringify(ref)) 
    
    if (nestedArrayKayname) {
      nonNestedKeys.forEach(elem => {
        ref[`${elem}`] = i[elem]
      }) 
      unwindArray(i[nestedArrayKayname], queue, ref)
    }else {
       nonNestedKeys.forEach(elem => {
        ref[`${elem}`] = i[elem]
      }) 
      queue.push(ref)
    }
  }
  return queue
}

console.log(unwindArray(data, [],{}))