2016-10-03 4 views
0

APIからJSONを出力することはできましたが、1つの大きなブロックで出力されましたが、閉じるごとに新しい行にそれぞれのjsonを表示したいと思います。 'React output JSON on new line

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

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> 
       <h2>Last Application Deployment </h2> 
      </header> 
      <div id='renderhere'> 
       {JSON.stringify(this.state.result)} 
      </div> 
      </div> 
     ); 
    } 
    } 

export default App; 

答えて

0

最初のオプション:あなたは目的をデバッグするための出力JSONする場合は、あなたがreact-json-pretty

2番目のオプションを試してみてください:何をやろうとすると、生産のためであると考えられる場合には、このような何かを実行します。

<div id='renderhere'> 
    <pre>{JSON.stringify(this.state.result, null, 2)}</pre> 
</div> 
+0

ありがとうございます。私はすでに 'JSON.stringify()'を使用していますが、達成しようとしているのは、JSONをブロック全体として出力するのではなく、JSONの各オブジェクトに新しい行でブラウザーに出力する必要があります。 – DaveDavidson

+0

申し訳ありませんが、私のコード例が壊れていましたので、もう一度答えを確認してください。 – Shota

+0

**素晴らしいです!**ありがとうございます。 – DaveDavidson

関連する問題