How do you convert a list of json objects to a list of javascript objects?

CRSoftware33

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?

archae0pteryx

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.

edited at
0

Comments

0 comments
Login to comment

Related

How to convert a list of strings into a list of objects?

Convert list of objects to a nested list of Objects javascript

How to convert list of objects to list of interfaces?

How do you remove trailing objects from a list with linq?

How do you create a table from a list of objects using React?

convert list of objects to Json array

How to convert javascript array to specific list of objects

How do you pass a nullable list of objects with Parcelable

How to convert list of JSON objects to JsonArray and then iterate on it?

How do you calculate multiple objects values in a list

How do you create a list of objects to pass to a widget in Flutter?

Dart convert array of json objects to list of objects

How to convert list of objects to list of map

Javascript: Convert list of objects to list of nested objects using groupBy

In Terraform, how do you output a list from an array of objects?

How do you sum on a list of objects in a java 8 stream

How can i do a list of objects in javascript?

How to convert a list of objects to list of attributes?

How to convert list of list to list of objects in python?

Convert list of strings to list of json objects in pyspark

How do you store a list of objects in an array?

Convert Objects to List of Objects Javascript

How do you loop through a list of objects and get a specific attribute?

How do you loop through a dataframe and convert rows to JSON objects

How do I write a json list with objects in javascript

In terraform, how do you sort a list of objects and grab the last value?

how to convert a List of objects to map

How do you change parts of a string in each element of a list of objects?

How to read a substring of JSON and convert to a list of objects