【问题标题】:Vue.js - how to get specified fields from object via axios reponse dataVue.js - 如何通过 axios 响应数据从对象中获取特定字段
【发布时间】:2020-12-23 22:55:02
【问题描述】:

这是我的 JSON 对象

{
    "id": 2,
    "dani": 5,
    "asset": {
        "id": 2,
        "code": "1",
        "name": "asset1",
        "descr": null,
        "version": "2020-09-01T15:39:53.821+0000",
        "model": {
            "id": 3,
            "code": "4",
            "name": "ZXc43V",
            "descr": "",
            "version": "2020-09-01T15:22:36.953+0000",
            "year": "2020-03-26"
        },
        "location": {
            "id": 1,
            "code": "4",
            "name": "Lokacija 5",
            "descr": "",
            "version": "2020-06-03T12:22:55.693+0000",
            "adress": "Obilicev venac 24",
            "dateFrom": "2020-06-03",
            "dateTo": "2022-05-07",
            "active": false
        }
    }
}

假设我已经声明了数组“assets[]”。 我想用它做的是当我使用时

axios.get('url').then(response => this.array = response.data 

我想从我的对象(r​​esponse.data 提供)中提取资产名称(asset.name),并仅将资产名称放入我的数组“assets[]”中,因此它仅包含来自 JSON 对象的资产名称,没有别的。

谢谢

【问题讨论】:

    标签: json vue.js vuejs2 axios vue-component


    【解决方案1】:

    你可以使用map函数如下:

    this.assets=response.data.map(item=>({name:item.asset.name}));
    
    

    或者如果您不需要该字段:

    this.assets=response.data.map(item=>item.asset.name);
    
    

    【讨论】:

    • 感谢您的回复。在发布此问题之前,我尝试了您的第二个选项(并且我再次尝试了该选项以及您的第一个选项),但我收到此错误:“Uncaught (in promise) TypeError: item.asset is undefined”。跨度>
    • response.data 的输出是什么?
    • 好的,nvm,我一直在 axios 请求中输入了错误的 url(为此浪费了 2 个小时)......它现在可以工作了(duh)。我会留下这个问题,以防将来有人需要它。再次感谢,你真的很有帮助。
    【解决方案2】:

    您可以迭代对象并推入数组。

    axios.get('url').then((response) => {
      response.data.forEach((item) => {
         this.assets.push(item.asset.name)
      })
    })
    

    【讨论】:

    • 虽然此代码可以解决问题,including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量,并可能导致更多的赞成票。请记住,您正在为将来的读者回答问题,而不仅仅是现在提出问题的人。请edit您的答案添加解释并说明适用的限制和假设。
    猜你喜欢
    • 2021-11-26
    • 2017-05-20
    • 1970-01-01
    • 2021-01-28
    • 1970-01-01
    • 2021-08-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多