如何从 API 获取和显示特定 JSON 数据的正确方法答案

【问题标题】：Correct way how to get and show data from specific JSON from API如何从 API 获取和显示特定 JSON 数据的正确方法
【发布时间】：2019-09-27 18:17:35
【问题描述】：

我使用第三方 API。根据要求，我应该添加我想要获取的字段。例如：

axios.get("APIURL", {
    params: {
      fields: ["username", "phone", ...etc]
    }
  })

我收到了这种格式的回复：

{
    "data": [{
        "username": {
            "id": 17,
            "data": "JohnDoe",
            "created_at": "2019-05-09 15:52:23"
         }
    },
    {
         "phone": {
             "id": 2,
             "data": "+123456789",
             "created_at": "2019-05-08 17:31:52"
         }
    }]
}

我需要准备一个包含用户名、电话等的对象，以便在 vuetify 表中显示。接下来我做：

response => {
      this.userInfo = {
        username: response.data.data[0].username.data,
        phone: response.data.data[1].phone.data
      };
    }

在我看来，它看起来很丑。所以，我有两个问题：

1) 如何从 JSON 中获取数据？我需要在 vuetify 表中显示用户名、电话、电子邮件、地址和更多字段。

2) 存在某些字段未定义的情况。例如，如果有用户名、电话、地址，但未定义电子邮件。在我当前的代码中，我收到错误“TypeError: Cannot read property 'data' of undefined”

感谢您的帮助。

【问题讨论】：

1.你似乎已经正确地做到了这一点。 2.做一些错误检查。

标签： javascript json rest api vue.js

【解决方案1】：

这里是您可以用来从响应中检索所需数据的函数：

function getData(data) {
  const out = {};

  data.forEach((items) => {
    Object.keys(items).forEach((key) => {
      out[key] = items[key].data;
    });
  });

  return out;
}
this.userInfo = getData(response.data.data) //usage of function

【讨论】：

【解决方案2】：

另一种方法是在解析过程中简化对象并将结果数组简化为对象：

var json = '{"data":[{"username":{"id":17,"data":"JohnDoe","created_at":"2019-05-09 15:52:23"}},{"phone":{"id":2,"data":"+123456789","created_at":"2019-05-08 17:31:52"}}]}'

var arr = JSON.parse(json, (k, v) => v.data || v)

var obj = arr.reduce((o, v) => Object.assign(o, v), {})

console.log(obj)
console.log(arr)

或者，没有减少：

var obj = {}, json = '{"data":[{"username":{"id":17,"data":"JohnDoe","created_at":"2019-05-09 15:52:23"}},{"phone":{"id":2,"data":"+123456789","created_at":"2019-05-08 17:31:52"}}]}'

JSON.parse(json, (k, v) => v.data && k ? (obj[k] = v.data) : v)

console.log(obj)

【讨论】：