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

Posted 2023-02-22

【中文标题】如何从 API 获取和显示特定 JSON 数据的正确方法

【英文标题】：Correct way how to get and show data from specific JSON from API

【发布时间】：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": "[phone]",
             "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.做一些错误检查。

【参考方案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":"[phone]","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":"[phone]","created_at":"2019-05-08 17:31:52"]'

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

console.log(obj)