axios gives me JSON object, but can't parse to Javascript object

Question

I've been trying to figure this out, and don't know what I'm doing incorrectly. I'm also new to Aurelia, Typescript, and Axios.

The backend gives me a JSON array of objects that I want to parse into Javascript Objects. Cool. For my fake data I'm using JSONplaceholder. When I parse, what is returned is [object Object] (see link to image at bottom). What am I doing incorrectly? Eventually I'd like to pull specific data out, like info.name, and display the name.

test.ts

import axios from 'axios';
const apiURL = 'https://jsonplaceholder.typicode.com/users';

declare var $: any;


export class Test {
    info: string;
    infoX: string;
    public constructor () {
      axios.get(apiURL)
        .then(response => {
          this.info = JSON.stringify(response.data)
          this.infoX = JSON.parse(this.info);
          console.log(this.info);
          console.log(this.infoX);
        })
        .catch(error => console.log(error));
    }
}

test.html

<template>
  <pre style="margin-top: 200px">${info}</pre>
  <pre style="margin-top: 200px">${infoX}</pre>
</template>

screenshot of what the console log and view displays

No, the back-end gives you a JSON string - so get rid of JSON.stringify in your response handler. Now, say you have an array of objects in javascript and you try to set it as the html of some div - you will get `[[Object object],[Object object]...]`. You need to iterate the array pull out the various properties from the objects and display them. — James, Jan 05 '18 at 18:33
Your problem is not in parsing, but in printing. `${infoX}` converts the array to a string which is not the same as `JSON.stringify` — kmdreko, Jan 05 '18 at 18:34
@James thanks for the reply. Can you clarify something for me? If the backend gives me a string, does the array of objects have to be in quotes? — cmbo, Jan 05 '18 at 18:38
Usually the backend function you use to turn a native object or array into JSON takes care of all the quotes, it looks like you're sending/receiving the JSON just fine though. — James, Jan 05 '18 at 18:42
@James, thanks for the help and clarification. Pointed me in the right direction. The key was iterate like you mentioned. And understanding JSON.parse and JSON.stringify better. — cmbo, Jan 08 '18 at 19:30

score 1 · Accepted Answer · answered Jan 08 '18 at 19:44

The following link helped clear up some confusion I was having: simple explanation of JSON.parse and JSON.stringify

Then listening to Jame's advice in the comments I iterated over the array, and returned the data from server.

test.ts

import axios from 'axios';
const apiURL = 'https://jsonplaceholder.typicode.com/users';

export class Data {
    infos: string;
    public constructor () {
      axios.get(apiURL)
        .then(response => {
          this.infos = response.data;
          console.log(this.infos);
        })
        .catch(error => console.log(error));
    }
}

test.html

<template>
    <ul>
        <li repeat.for="info of infos">
          Name: ${info.name}
        </li>
    </ul>
</template>

axios gives me JSON object, but can't parse to Javascript object

1 Answers1