React Js 数组操作-解网

问：

希望你一切顺利我一开始就遇到了数据数组操作的问题，随着工作的进展，不需要太多的操作，现在需要更多的数据操作，而我在这方面做得不够（作为我职业生涯的早期问题解释 - 作为数据，我接收了一个对象数组，每个对象包含另一个信息数组（键值对），该数组还包含另一个信息数组（键值对），并且要求我必须根据深度嵌套数组的长度循环主数据对象项并将它们显示在前面，除了这个我已经完成了大部分。我在下面附上我的问题的示例代码，我要求你们提供这个问题的解决方案

`

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;

预期结果是将两个数组都推送到 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",
  },
];

JavaScript ReactJS 多维数组数据操作

const yourData = [
  {
    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 tempFunc = (yourData) => {
 const result = [];
 for(let data of yourData){
    const temp ={...data, ...data.arr1[0], ...data.arr1[0].arr2[data.arr1[0].arr2.length-1]};
    delete temp.arr1;
    delete temp.arr2;
    result.push(temp);
  }
  return result;
};

console.log(tempFunc(yourData));

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, [],{}))

React Js 数组操作

React Js array manipulation

评论

评论

评论