Правильный способ, как получить и показать данные из конкретного JSON из API

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) Существуют случаи, когда некоторые поля не определены. Например, если есть имя пользователя, телефон, адрес, но адрес электронной почты не определен. В моем текущем коде я получаю сообщение об ошибке «Ошибка типа: невозможно прочитать свойство« данные »неопределенного» * ​​1014 *

Спасибо за помощь.

Answer 1

Альтернативой может быть упрощение объекта во время синтаксического анализа и уменьшение результирующего массива до объекта:

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)

Answer 2

Вот функция, которую вы можете использовать для получения данных, которые вам нужны из ответа:

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