Remove brackets from JSON array React

Question

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 1

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.

Answer 2

This should help you. Just do a regex replace!

 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)