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 = '';

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

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./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

• javascript
• json
• typescript
• aurelia
• axios

• 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 Commented Jan 5, 2018 at 18:33
• 1 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 Commented Jan 5, 2018 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 Commented Jan 5, 2018 at 18:38
• 1 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 Commented Jan 5, 2018 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 Commented Jan 8, 2018 at 19:30

1 Answer 1

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 ments I iterated over the array, and returned the data from server.

test.ts

import axios from 'axios';
const apiURL = 'https://jsonplaceholder.typicode./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>