I am currently running into a problem while developing a small web app. I want to send a query to my API from my react front end to ask for a list of "devices" from my MongoDB database. My API endpoint correctly gets that data from the database. However, when I send it back to the front end I run into a problem where I just have a list of "[Object object]"'s and I don't know how to convert this to a list of javascript objects that I can use to render each object in the list into a react component. Anyone know how I can do this?
I've tried to use a variety of combinations of json.parse and json.stringify but I still cant figure out how to properly get these results into a react component.
My API endpoint:
app.get("/api/getdeviceinfo", function(req, res) {
let token = req.cookies.token;
let decoded = jwt.decode(token);
let email = decoded.email;
let devices = DeviceInfo.find({}).exec(function(err, results) {
if (err) {
res.send("an error has occured");
} else {
console.log(results);
res.json(results);
}
});
});
A clip from my frontend:
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
deviceInfo: []
};
}
componentDidMount() {
fetch("/api/getdeviceinfo", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(data => {
let info = JSON.stringify(data);
let infoData = JSON.parse(info);
})
.catch(err => {
console.error(err);
alert("Error logging out\n" + err);
});
}
I would like to have this json list of results from my database be a list of javascript objects but instead I have a list of [Object object]'s.
Update:
When I use the following code the resulting alert displays [object Object], [object Object], [object Object], [object Object], [object Object]:
componentDidMount() {
fetch("/api/getdeviceinfo", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(data => {
alert(data);
})
.catch(err => {
console.error(err);
alert("Error logging out\n" + err);
});
}
This is the correct number of items in the list. But how do I get the attributes from each object?
There's a couple of problems here. The first is that you're calling res.json() without passing the object. Second is that the "res" object is not really the data. It's a cyclic object You either need to destructure like so (if the data is truly in the .data property of that object you could check by calling console.log(JSON.stringify(res)) to get a look):
.then(({data}) => res.json(data)
or access the property of data from the res
res.data
Another note. I'm not all that familiar with the fetch api. I use axios. I don't believe there is a res.json() method on that object like there is with express or other libraries. do a console log or debug into that .then and check...
.then(res => console.log(JSON.stringify(res))
You may just want to destructure and set your state with it. I realize this is incomplete because of my lack of knowledge here so if there's an issue with that i'll happily delete this answer. Just trying to get you unstuck mate!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments