我如何将这种类型的 api 响应转换为对象数组。 在反应中

Question

所以这是我得到的 api 响应。

[
    {
        "Declaration":[
            {
                "id":111,
                "emp_name":"john",
                "pan":"QWHTERT",
                "desigination":"SDE",
                "house_loan":0,
                "car_loan":0
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":112,
                "emp_name":"emy",
                "pan":"QWHHGTRT",
                "desigination":"HR",
                "house_loan":10000,
                "car_loan":2000
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":114,
                "emp_name":"diya",
                "pan":"QWHHGTRT",
                "desigination":"PM",
                "house_loan":30000,
                "car_loan":6000
            }
        ],
        "Rent":[]
    },
    {
        "Declaration":[
            {
                "id":115,
                "emp_name":"ringu",
                "pan":"AWSDWHHGTRT",
                "desigination":"TL",
                "house_loan":90000,
                "car_loan":7000
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":116,
                "emp_name":"jincy",
                "pan":"LPOWHHGTRT",
                "desigination":"SDE 2",
                "house_loan":80000,
                "car_loan":4000
            }
        ],
        "Rent":[]
    }
]

我需要将此响应转换为单个对象数组。 其中 Rent 数组应与 declaration 数组合并。 它应该是一个包含所有租金和声明数据的对象数组。 所需的输出应如下所示。

{
    declaration:[
        {
            "id":115,
            "emp_name":"ringu",
            "pan":"AWSDWHHGTRT",
            "desigination":"TL",
            "house_loan":90000,
            "car_loan":7000,
            "house_rent":12000,
            "gym_rent":1500
        },
        {
            "id":111,
            "emp_name":"john",
            "pan":"QWHTERT",
            "desigination":"SDE",
            "house_loan":0,
            "car_loan":0,
            "house_rent":12000,
            "gym_rent":1500
        },
        {
            "id":112,
                "emp_name":"emy",
                "pan":"QWHHGTRT",
                "desigination":"HR",
                "house_loan":10000,
                "car_loan":2000,
                "house_rent":12000,
                "gym_rent":1500
        }
    ]
}

因此很容易将这些列在网格中。

我已经尽力了。 附上我试过但不起作用的代码

class App extends React.Component{
  constructor() {
    super();
    this.state({
      userDetails:[]
    })
  
  }
  componentDidMount(){
    renderData();
  }
  renderData(){
    instance
    .get("/rentdeails/user")
    .then((res)=>{
      const declarationDetails = [];
      const rentDetails = [];

      for(let key in res.data){
        declarationDetails = res.data[key].Declaration
        rentDetails = res.data[key].Rent
      }

      const mergedArray = [...declarationDetails, ...rentDetails];

      this.setState({userDetails:mergedArray});
      console.log(mergedArray);
    })
  }

如有任何疑问，请随时提出。 任何帮助将不胜感激。

Answer 1

你可以使用数组映射方法......

注意：这个例子认为Declaration和Rent中只有一个元素

 const data = [ { Declaration: [ { id: 111, emp_name: "john", pan: "QWHTERT", desigination: "SDE", house_loan: 0, car_loan: 0, }, ], Rent: [ { house_rent: 12000, gym_rent: 1500, }, ], }, { Declaration: [ { id: 112, emp_name: "emy", pan: "QWHHGTRT", desigination: "HR", house_loan: 10000, car_loan: 2000, }, ], Rent: [ { house_rent: 12000, gym_rent: 1500, }, ], }, { Declaration: [ { id: 114, emp_name: "diya", pan: "QWHHGTRT", desigination: "PM", house_loan: 30000, car_loan: 6000, }, ], Rent: [], }, { Declaration: [ { id: 115, emp_name: "ringu", pan: "AWSDWHHGTRT", desigination: "TL", house_loan: 90000, car_loan: 7000, }, ], Rent: [ { house_rent: 12000, gym_rent: 1500, }, ], }, { Declaration: [ { id: 116, emp_name: "jincy", pan: "LPOWHHGTRT", desigination: "SDE 2", house_loan: 80000, car_loan: 4000, }, ], Rent: [], }, ]; const res = { declaration: data.map((el) => { return {...el.Declaration[0], ...el.Rent[0] }; // as mentioned in note }), }; console.log(res);