axios给了我JSON对象，但是无法解析为Javascript对象

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

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