javascript - Vuejs,如何构建一个对象?
问题描述
您好,我正在尝试通过 API 在我的网站上显示图形,要在列中显示我的图形,我需要向他发送一个像这样的对象
data: [{
name: 'Data1',
data: [
['ALIONIVS', 1],
['GARCIC(I)VS', 1],
['NONIVS', 1],
['SERVERS,A', 1]
],
},
{
name: 'Data2',
data: [
['TVTOR', 1],
['FVSCINVS', 1],
['GVTAMVS / GVMATIVS', 1],
['SEVERINVS, -A', 1],
['TVSCVS, -A / TVSGVS', 1],
['VEIENTA', 1],
]
}
],
但是我想要动态数据,我正在使用 axios 从我的 api 中检索数据。
axios
.get('../api/civitasnomen/' + this.searchInputcivitas)
.then(response => {
this.data1 = response.data.map(item => {
return [item.lemme, item.nb];
})
})
axios
.get('../api/civitascognomen/' + this.searchInputcivitas)
.then(response => {
this.data2 = response.data.map(item => {
return [item.lemme, item.nb];
})
})
在我的对象中,我想同时检索我的 api 数据
如果在 axios 中这样写:
axios .get('../api/civitasnomen/' + this.searchInputcivitas) .then(response => this.data1 = response.data)
例如数据1 =
[ { "nb": 1, "lemme": "ALIONIVS" }, { "nb": 1, "lemme": "GARIC(I)VS" }, { "nb": 1, "lemme": "NONIVS, -A" }, { "nb": 1, "lemme": "SEVERVS, -A" } ]
和数据2 =
[ { "nb": 1, "lemme": "TVTOR" }, { "nb": 1, "lemme": "FVSCINVS" }, { "nb": 1, "lemme": "GVTAMVS / GVMATIVS" }, { "nb": 1, "lemme": "SEVERINVS, -A" }, { "nb": 1, "lemme": "TVSCVS, -A / TVSGVS" }, { "nb": 1, "lemme": "VEIENTA" } ]
解决方案
假设您将data
属性初始化为空数组:
data(){
return {
data: [],
}
}
然后使用来自 API 的结果更新它:
axios
.get('../api/civitasnomen/' + this.searchInputcivitas)
.then(response => {
this.data.push({
name:'data1',
data:response.data.map(item => {
return [item.lemme, item.nb];
})
})
})
axios
.get('../api/civitascognomen/' + this.searchInputcivitas)
.then(response => {
this.data.push({
name:'data2',
data:response.data.map(item => {
return [item.lemme, item.nb];
})
})
推荐阅读
- python - 在 python 中,我想要数千个单独的十进制数字并以 2 个十进制数字显示
- sylius - 如何在 Sylius 中自定义 Stripe 模板?
- azure - Azure 中的人脸检测
- java - MVC:下拉菜单中的值未设置为选定值 - 保持为 0
- javascript - JavaScript 类是否有与 Python 类的 __call__ 等效的方法?
- javascript - 在带有空格的对象内搜索字符串名称
- html - 使用带有标签的 react-router 链接
- sql - 按顺序更新列值,其中新值基于“上一个”行中的更新值
- javascript - 我有一个不安全的 API (HTTP) 正在尝试访问,Chrome 会阻止数据。有什么办法可以解决这个问题?
- linux - fedora 29 Linux 上的二进制文件“Eclipse C/C++ Stand-alone Debugger”在哪里