Display key-value pairs from Json in React JS - node.js

Question

I want to access the data from my local mongoDB and I want to search for all keys without making a state{} wherein I will have to pre-define what kind of keys are present in the database.
Now although this problem has been answered numerous times by different people , most of them have the data in the following format ( it is a random example):
{
"object": {
"name": "Pluralsight",
"number": 1,
"address": "India",
"website": "https://www.pluralsight.com/"
}
}
or like this:
{
"String":"EternalSunsetOfCloudedMind",
"Rating": 2
}
In the above two examples we can easily use the function : <p>Name: {sampleJSON.object.name}</p> or <p>String : {sampleJSON.string}</p>
But what if the database looked like this:
[{"_id":"60d1b5493b470b3884325872","Title":"CatManBegins" ,"Image":"https://m.media-amazon.com/images/catmanbegins.jpg","Rating":9},
{"_id":"60d1b5d0b25e04287318a072", "Title":"Cabdriver","Image":"https://m.media-amazon.com/images/cabdriver.jpg"},
{"_id":"60d314a981ecb624dc6966a2","Title":"Pulpnonfiction" ,"Image":"https://m.media-amazon.com/images/pulpnonfiction.jpg","Review":{"AlphaReview":"WOW!","BetaReview":"Okay nice","GamaReview":"Hmm"}},
{"_id":"60d32406affa146b4b1428a2", "Title":"DoctorNormal","Category":"Marvellous Movies"},
{"_id":"60d5cfc6326f1c336d3478e2", "Title":"GameOfKingdoms","BudgetInDollars":100000}]
How can I do the same in this kind of database?
My current knowledge and progress:
Till now I have been able to fetch the data from MongoDB to the server-side, from which I have been able to send the JSON to the client-side after parsing it using the following code:
Server.js
app.get('/run-query',async(req,res)=>{
MongoClient.connect('mongodb://localhost:27017',{useNewUrlParser: true, useUnifiedTopology: true}, function(err,db){
if(err) throw err;
var dbo = db.db("MyDatabaseName");
dbo.collection("MyCollectionName").find({}).toArray(function(err,result){
if(err) throw err;
res.json(result);
db.close();
});
});
})
Client/src/App.js
function App() {
const [data, setData]= useState(null);
useEffect(()=>{
fetch('/run-query')
.then ((res)=>res.json())
.then (setData)
.catch(console.error)
}, []);
return (
<div>
<h1>All results </h1>
<div class="box">
<p>{!data ? "loading..." : JSON.stringify(data)}</p>
</div>
</div>
);
}

Answer 1

When you want to display an array, usually you’ll want to map each item in the array to a React element.
To get all property names and values of a JavaScript object, you can use the Object.entries() function.
Putting these two together:
// maps each object in the array to an unordered list of key/value pairs
const dataItemToKeyValues = (item) => {
const entries = Object.entries(item);
const listItems = entries.map(([key, value]) => (
<li>
{key}: {value}
</li>
));
return <ul>{listItems}</ul>;
};
return (
<div>
{!data ? (
"Loading"
) : (
<ul>
{data.map((item) => (
<li>{dataItemToKeyValues(item)}</li>
))}
</ul>
)}
</div>
);
The React documentation has a section on lists that has more information.