I want to show every key and value of my incoming object, the object is filled dynamically, so if there is an object in the object I also need to show the key and value of that object too.
This is the object for example
info:{
address:{
city: {__old: 'city1', __new: 'city2'}
country: {__old: 'country1', __new: 'country2'}
lineOne: {__old: 'lineOne1', __new: 'lineOne2'}
},
personalId: {__old: '55555555', __new: '555555556'}
}
You can do it with JSON.stringify like this:
// import React from "react";
const address = {
city: { __old: "city1", __new: "city2" },
country: { __old: "country1", __new: "country2" },
lineOne: { __old: "lineOne1", __new: "lineOne2" },
};
const App = () => {
return <pre>{JSON.stringify(address, null, 3)}</pre>;
};
// export default App;
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>Also you can use some library, like JSONTree:
import React from "react";
import JSONTree from "react-json-tree";
const address = {
city: { __old: "city1", __new: "city2" },
country: { __old: "country1", __new: "country2" },
lineOne: { __old: "lineOne1", __new: "lineOne2" },
};
const App = () => {
return <JSONTree data={address} />;
};
export default App;