Question

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

2018-01-05

20895

javascript json typescript aurelia axios

我一直在尝试解决这个问题，但不知道我做错了什么。我对 Aurelia、Typescript 和 Axios 也是新手。

后端为我提供了一个 JSON 对象数组，我想将其解析为 Javascript 对象。太棒了。对于我的虚假数据，我使用 JSONplaceholder。解析时，返回的是 [object Object]（请参阅底部的图像链接）。我做错了什么？最终，我想提取特定数据，例如 info.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>

控制台日志和视图显示的屏幕截图

Answer 1

以下链接帮助我消除了一些困惑： JSON.parse 和 JSON.stringify 的简单解释

然后听取了评论中 Jame 的建议，我遍历了数组，并从服务器返回了数据。

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>