Как отрисовать объект на странице

Question

  const [ result, setResult ] = useState ( {
    array: null
  } );

  
  useEffect ( () => {
    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };

    axios.get ( `${process.env.REACT_APP_HOST}/api/v1/jira`, config )
      .then ( ( res ) => setResult ( {array: res.data} ) )
      .catch ( error => console.log ( error.message ) );
  }, [] );

  console.log ( '-----------------'+result );
  // // throw Error




  return (
    <HomeContainer>
      <Header />
      <HomeContentWrapper>

        <HomeContent>
          <h1>Home Page</h1>
            { result && <div>{JSON.stringify(result)}</div>}
        </HomeContent>
      </HomeContentWrapper>
    </HomeContainer>
  );
};

отображается но без табуляции) все по строкам, а хотелось бы как в консоле

const Home = ( ) => {
  const [ result, setResult ] = useState ( null );


  useEffect ( () => {
    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };

    axios.get ( `${process.env.REACT_APP_HOST}/api/v1/jira`, config )
      .then ( ( res ) => setResult (  res.data ) )
      .catch ( error => console.log ( error.message ) );
  }, [] );

  console.log ( '-----------------' + result );
  // // throw Error




  return (

    <HomeContainer>
      <Header />
      <HomeContentWrapper>

        <HomeContent>
          <h1>Home Page</h1>
          <div>{ result && JSON.stringify(result,null,4)}</div>
        </HomeContent>
      </HomeContentWrapper>
    </HomeContainer>
  );
};



export default  Home;

Answer 1

У метода JSON.stringify есть входящие параметры и помимо строки парсинга (по традиции, ссылка на mdn. Используйте space c числовым значением.

const output = document.getElementById("output");
const obj = {
  foo: "bar",
  baz: [5, 6, 7]
}
output.append(JSON.stringify(obj, null, 4));

#output {
  white-space: pre-wrap;
}

<div id="output"></div>

БЛОГ НА HUSL

Как отрисовать объект на странице

Ответы (1 шт):