DaveDavidson DaveDavidson - 2 months ago 19
React JSX Question

Remove brackets from JSON array React

I am trying to remove the } { brackets from my outputted array in the browser, to make it look cleaner on my page, however I am unsure how to do so. I have the array already outputting correctly, on a new line per object which is correct, but I'd like to remove the brackets.

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;


The output currently looks like this:

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


However I would like the output to look like this:

"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


And if it is possible i would also like to remove the speech marks, but just removing the brackets is fine for now.

Answer

You should not probably do it that way. Reasons:

  1. It's non natural way

  2. Operations with strings (stringifying to json and replacing with regexp) is expensive.

Instead you can map over your array:

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

This is not that valid from HTML spec's point of view and may probably broke your styling, but I've decided to leave it here for the case you might consider it useful.

Comments