Question

我使用第三方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：无法读取未定义的属性'data'”

感谢帮助。

Answer 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

Answer 2

替代方法可能是在解析过程中简化对象，并将结果数组减少为object：

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)

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

2 个答案: