尝试在ReactJS中的对象内，在对象内定位JSON对象

Question

我有这个json blob我试图映射：

{
    "pdns": [
      {
        "id":6,
        "code":"\nfrom trutils.spark import pdns\nimport json\ndf = pdns.query(values=\"c.ipts.com\", start=\"2018-02-01\", end=\"2018-02-02\")\nrecords = df.collect()\nparsed_records = [[record.domain, record.addr, record.type, record['count'], record.lastSeen] for record in records]\nprint(json.dumps(parsed_records))\n",
        "state":"available",
        "output":{
                  "status":"ok",
                  "execution_count":6,
                  "data":{
                            "text/plain":"[[\"c.ipts.com\", \"198.11.168.38\", \"A\", 11, 1517516700]]"
                         }
                  },
        "progress":1.0
      }
    ]
   },

在我的表中，我不确定如何在“text / plain”中定位数据数组。我需要将数组中的这些项单独解析为单个单元格。

这是我当前的表格代码：

<tbody>
                    {this.state.gvEntries.map(pdns => (
                      <tr>
                          <td>{}</td>
                          <td>{}</td>
                          <td>{}</td>
                          <td>{}</td>
                          <td>{}</td>
                      </tr>
                     ))}
                    </tbody>

这是我如何获取上面组件中的数据。我已经将这一切都用于第一层对象。

constructor(props) {
    super(props);  
    this.state = { gvEntries: [] };
  }

  componentDidMount() {
  fetch("http://localhost:3000/mockData/")
    .then(pdns => pdns.json())
    .then(data => this.setState({ gvEntries: data[4].pdns }));
  }

任何帮助将非常感激！！！

Answer 1

JSON.parse可用于将JSON对象字符串解析为对象。要将此数据映射到表中，请尝试以下代码：

<tbody>
  {
    JSON.parse(this.state.gvEntries[0]['output']['data']['text/plain'])[0].map(row => (
      <tr>
        <td>{row}</td>
      </tr>
    ))
  }
</tbody>

基本上，我在这里做的是尝试使用JSON.parse将您的JSON字符串转换为JSON对象。 this.state.gvEntries[0]['output']['data']['text/plain']是我试图访问你的JSON字符串的方式。在通过JSON.parse（）运行该值之后，我将数组中的第一个元素作为目标（因为它看起来像是数组中的数组），并为每个元素赋予它在表中自己的行。

我假设您显示的JSON blob等同于this.state.gvEntries