如何使用 reactjs 获取列 work_status 和 text1 的 JSON 记录值答案

【问题标题】：How to get JSON records values for column work_status and text1 using reactjs如何使用 reactjs 获取列 work_status 和 text1 的 JSON 记录值
【发布时间】：2022-08-24 05:58:31
【问题描述】：

下面的代码用于在 React.js 中显示 JSON 记录，它工作正常，因为我可以显示数据 ID 和名称。

我如何也获取/显示值工作状态（例如状态 1、状态 3、状态 9）和text1（例如 Ann、Tony、John）?

这是代码：

import React from \"react\";
    
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[
        {
          \"id\": \"2788621216\",
          \"name\": \"Item 1\",
          \"column_values\": [
            {
              \"id\": \"work_status\",
              \"value\": \"\\\"status1\\\"\"
            },
            {
              \"id\": \"text1\",
              \"value\": \"\\\"Ann\\\"\"
            }
          ]
        },
        {
          \"id\": \"2757366595\",
          \"name\": \"item 2\",
          \"column_values\": [
            {
              \"id\": \"work_status\",
              \"value\": \"\\\"status 3\\\"\"
            },
            {
              \"id\": \"text1\",
              \"value\": \"\\\"Tony\\\"\"
            }
          ]
        },
        {
          \"id\": \"2758432275\",
          \"name\": \"Item 3\",
          \"column_values\": [
            {
              \"id\": \"work_status\",
              \"value\": \"\\\"status 9\\\"\"
            },
            {
              \"id\": \"text1\",
              \"value\": \"\\\"John\\\"\"
            }
          ]
        }
      ],
    };
  }
     
  componentDidMount() {}
    
  render() {
    const { } = this.state;
    return (
      <div>     
        {this.state.data.map(b => (
          <div key={b.id} className=\'\'>
            <div class=\"card-body\">
              <b>BId:</b> {b.id}
              <br />
              <b>Name:</b> {b.name}
            </div>
          </div>
        ))}
      </div>
    );
  }
}
    
export default App;

以与映射数据相同的方式，通过 b. column_values 再次搜索，找到具有正确类型的值 (c.id === \'work_status\')，然后像往常一样显示值 <b>Status:</b> {c.value}

标签： reactjs

【解决方案1】：

如果您有固定位置的值，您可以使用它

Look At this JSFieddle

<div>
      {this.state.data.map((b, i) => (
        <div key={b.i}>
          <div class="card-body">
            <b>BId:</b> {b.id}
            <br />
            <b>Name:</b> {b.name}
          </div>

          <div class="work-status">
            <h4>Work status</h4>
            <p> {b.column_values[0].value.replace(/"/g, "")} </p>
          </div>

          <div class="text-1">
            {/* text */}
            <h4> Text</h4>
            <p> {b.column_values[1].id} </p>
          </div>
        </div>
      ))}
    </div>

【讨论】：

谢谢。它现在可以工作@Ganesh MB，无论如何请删除围绕显示值的双引号，例如“状态1”和别的
@NancyMoore 您可以使用此正则表达式.replace(/"/g, "") 删除双引号。我更新了代码检查它。

【解决方案2】：

您可以尝试创建一个具有所有相关属性的对象，如下所示

let output = data.map(x => {
    let item = {};
  
  item["id"] = x.id;
  item["name"] = x.name;
  
  x.column_values.forEach(y => {
    item[y.id] = y.value;
  
  })
  
  return item;
});

并通过此映射（您的所有必填字段都将在对象上可用）

【讨论】：