从 JSON 数组 React 中删除括号答案

【问题标题】：Remove brackets from JSON array React从 JSON 数组 React 中删除括号
【发布时间】：2016-10-03 12:37:17
【问题描述】：

我正在尝试从浏览器中的输出数组中删除 } { 括号，以使其在我的页面上看起来更干净，但是我不确定如何执行此操作。我的数组已经正确输出，在每个对象的新行上是正确的，但我想删除括号。

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import { Image } from 'react-native';

class App extends Component {

  state = {result : null}

  componentDidMount = () => {

    $.ajax({
      type: "GET",
      url: 'http://localhost:3001/data',
      data: {},
      xhrFields: {
        withCredentials: false
      },
      crossDomain: true,
      dataType: 'JSON',
      success: (result) => {
        this.setState({result : result});
      }
    });

  };

  render() {
    return (
          <div className="App">
            <header>
              <Image
              style={{width: 200, height: 50, margin: 'auto'}}
              source={require('./img/XXX.png')}
              />
            </header>
            <div className='renderhere'>
              <pre>{JSON.stringify(this.state.result, null, 2).replace(/]|[[]/g, '')}</pre>
            </div>
            <footer>Last Application Deployment v1.0. By XXX.</footer>
          </div>

        );
  }
    }

export default App;

当前的输出如下所示：

  {
    "appName": "App 1",
    "latestDeploymentDate": 0
  },
  {
    "appName": "App 2",
    "latestDeploymentDate": 1
  },
  {
    "appName": "App 3",
    "latestDeploymentDate": 2
  },
  {
    "App 4",
    "latestDeploymentDate": 3
  },
  {
    "appName": "App 5",
    "latestDeploymentDate": 4
  }

但是我希望输出看起来像这样：

    "appName": "App 1",
    "latestDeploymentDate": 0

    "appName": "App 2",
    "latestDeploymentDate": 1

    "appName": "App 3",
    "latestDeploymentDate": 2

    "appName": "App 4",
    "latestDeploymentDate": 3

    "appName": "App 5",
    "latestDeploymentDate": 4

如果可能的话，我也想删除语音标记，但现在只删除括号就可以了。

【问题讨论】：

您的输出现在看起来如何以及您希望它如何，如果您可以分享更易于理解的图像或视图
我已经修改了帖子以添加更多关于我希望它看起来如何的细节。

标签： javascript arrays json reactjs

【解决方案1】：

您不应该那样做。原因：

这是不自然的方式
字符串操作（字符串化为 json 并替换为正则表达式）成本很高。

相反，您可以映射您的数组：

<pre>
  {this.state.result.map(item => {
    return (
      <span>"appName": "{item.appName}"</span>
      <span>"latestDeploymentDate": "{item.latestDeploymentDate}"</span>
    )
  })
</pre>

从 HTML 规范的角度来看，这不是那么有效，并且可能会破坏您的样式，但我决定将它留在这里，以防您认为它有用。

【讨论】：

【解决方案2】：

这应该对您有所帮助。只需替换regex！

var arr = [{
   "appName": "App 1",
   "latestDeploymentDate": 0
 }, {
   "appName": "App 2",
   "latestDeploymentDate": 1
 }, {
   "appName": "App 3",
   "latestDeploymentDate": 2
 }, {
   "appName": "App 4",
   "latestDeploymentDate": 3
 }, {
   "appName": "App 5",
   "latestDeploymentDate": 4
 }]

var str = JSON.stringify(arr)
var final = str.replace(/{|},|}/g, "\n").replace(/\[|\]|"/g, "").replace(/,/g, ',\n')
console.log(final)

【讨论】：