将 json 数组转换为字符串数组，仅包含 react 中 json 属性的值答案

【问题标题】：convert json array into string array with only the value of json properties in react将 json 数组转换为字符串数组，仅包含 react 中 json 属性的值
【发布时间】：2021-02-17 21:20:06
【问题描述】：

我正在尝试转换这个 json 数组

[
{empnum:"10",fullname:"john doe",dateofhire:"2000-01-01:12:00:00", lastupdate:"2021-02-02"},
{empnum:"20",fullname:"john smith",dateofhire:"1990-02-01:12:00:00", lastupdate:"2021-01-02"},
{empnum:"30",fullname:"john wayne",dateofhire:"2005-01-03:12:00:00", lastupdate:"2021-02-01"},
]

进入这2个字符串数组

["empnum","fullname","dateofhire","lastupdate"]

[
["10","john doe","2000-01-01:12:00:00","2021-02-02"],
["20","john smith","1990-02-01:12:00:00","2021-01-02"],
["30","john wayne","2005-01-03:12:00:00","2021-02-01"],
]

一个包含 json 属性，另一个包含值

我在使用 map 和 Object.entries 时遇到了困难，但总是出错

结果是json数组


  const x = result.map((rec)=>{
    var keys = rec.map((e)=>{
    return(e.keys)
  })
  var values = keys.join(",").split(",")
  return values
  })

任何提示我怎么能得到这个？谢谢

【问题讨论】：

标签： arrays json reactjs

【解决方案1】：

要获取第一个，您可以使用.reduce 返回一个keys 列表，表示在对象中找到的属性
要获得第二个，需要使用.map两次遍历数组中的每一项，每次返回该项中定义的keys的值

const data = [
  {empnum:"10",fullname:"john doe",dateofhire:"2000-01-01:12:00:00", lastupdate:"2021-02-02"},
  {empnum:"20",fullname:"john smith",dateofhire:"1990-02-01:12:00:00", lastupdate:"2021-01-02"},
  {empnum:"30",fullname:"john wayne",dateofhire:"2005-01-03:12:00:00", lastupdate:"2021-02-01"},
]

// get properties from objects
const props = data.reduce((acc,item) => 
  [...new Set([...acc, ...Object.keys(item)])]
, []);

// for each item, return array of values for the properties above
const records = data.map(item =>
  props.map(key => item[key])
);

console.log(props);
console.log(records);

【讨论】：

【解决方案2】：

我会这样做：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const data = [
    {
      empnum: "10",
      fullname: "john doe",
      dateofhire: "2000-01-01:12:00:00",
      lastupdate: "2021-02-02"
    },
    {
      empnum: "20",
      fullname: "john smith",
      dateofhire: "1990-02-01:12:00:00",
      lastupdate: "2021-01-02"
    },
    {
      empnum: "30",
      fullname: "john wayne",
      dateofhire: "2005-01-03:12:00:00",
      lastupdate: "2021-02-01"
    }
  ];

  React.useEffect(() => {
    console.log('keys =', Object.keys(data[0]));
    const values = data.map(item => Object.entries(item).map(entry => entry[1]));
    console.log('values = ', values)
  }, []);

  return <div>This is a template react</div>;
};

render(<App />, document.getElementById("root"));

这里是the repro on Stackblitz。

【讨论】：