如何将json对象列表转换为javascript对象列表？

Question

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?

Answer 1

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!