-
2020-12-20 16:57:38
我想使用Vue.js将JSON有效内容中的对象列表解析为表。Vue JS使用v-for从对象数组中获取JSON键值时出错
我想借此从第一对象的按键阵列中创建表的标题,下面工作的代码,并提供了正确的价值观,但问题是我不断收到此错误信息
错误信息
[Vue warn]: Error in render function: "TypeError: objectArray is null"
(found in )
HTML元素
{{ key }}
的JSON有效载荷
[
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" },
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" },
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }
]
的Vue的代码来填充对象
var link = 'api/array';
new Vue ({
el: '#app',
data: {
objectArray: null
},
methods:{
getObjectArray: function(){
this.$http.get(link).then(function(response){
this.objectArray = response.data;
}, function(error){
console.log(error.statusText);
});
}
},
mounted: function() {
this.getObjectArray();
}
});
2017-07-05
excedion
+0
警告意味着你'objectArray'属性是当它试图在'0'访问索引'null'。你是异步加载这个JSON数据吗? –
+0
不能异步加载它。我可以在同一点上加载整个列表而不会出现任何问题。只有当我在该数组中指定要使用的元素时才会发生此问题。如果我使用{{objectArray [0]}}在该索引处打印出对象,则不会出现任何错误 –
+0
您可以显示设置'objectArray'的位置吗? –
更多相关内容 -
Vue 获取数组键名的方法
2020-12-02 21:30:57想要获取 “教程” 这两个字作为标题,.vue中方法如下 {{Object.keys(sMain)[0]}} 其中的sMain是父级传下来的数组 import source from './assets/data/source.json' export default { data () { return { sHead:... -
Vue获取json数组数据的疑问
2020-03-22 14:51:52刚学vue,下面这个json,我想获取exchangesDataList下的totalBlastRate值,谢谢。 ``` { "code": 0, "data": { "coinsDataList": [ { "coin": "BTC", "icon": ... -
JS根据json数组多个字段排序及json数组常用操作
2020-12-10 07:45:21js 根据json数组多个字段排序的实现代码如下所示: /**数组根据数组对象中的某个属性值进行排序的方法 * 使用例子:newArray.sort(sortByArr(['number'],false)) //表示根据number属性降序排列;若第二个参数不传递... -
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2020-10-17 10:21:45主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下 -
vue 根据数组中某一项的值进行排序的方法
2020-10-18 03:25:37主要介绍了vue 根据数组中某一项的值进行排序的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
获取json数组里某一项的最大值
2020-10-30 14:50:05获取json数组里num中的最大值 var nums = [] $.ajax({ url:apiUrl, success:function(res){ nums = [] for (var i = 0; i<res.length; i++) { nums.push(res[i].num); } nums.sort(function(num1,num...获取json数组里num中的最大值
var nums = [] $.ajax({ url:apiUrl, success:function(res){ nums = [] for (var i = 0; i<res.length; i++) { nums.push(res[i].num); } nums.sort(function(num1,num2){ return num1-num2; }) var maxNum= eval(nums[nums.length-1]); console.log(maxNum) //最大数值 } })
-
VUE对json数组中某个字段相同的数据添加到同个数组
2020-05-19 08:16:29i++) { var arrindex=echararr.findIndex((item, index, arr) => {return item.name === data[i].name})//获取下标 if(arrindex==-1){//不存在盘符数据的添加盘符数据 echararr.push({ "name": data[i].name, "size...效果图:
代码:mounted() { this.CS(); }, methods: { CS() { var data = [{ "name": "C", "size": 240, "data": 57 }, { "name": "F", "size": 520, "data": 42 }, { "name": "G", "size": 240, "data": 47 }, { "name": "C", "size": 520, "data": 23 }, { "name": "F", "size": 240, "data": 14 }, { "name": "G", "size": 520, "data": 62 }, { "name": "C", "size": 240, "data": 34 }, { "name": "F", "size": 520, "data": 25 }, { "name": "G", "size": 240, "data": 35 } ] console.log(data) var echararr = []; for (var i = 0; i < data.length; i++) { var arrindex=echararr.findIndex((item, index, arr) => {return item.name === data[i].name})//获取下标 if(arrindex==-1){//不存在盘符数据的添加盘符数据 echararr.push({ "name": data[i].name, "size": data[i].size, "data": [data[i].data] }); }else{//有盘符则往盘符数据中添加 echararr[arrindex].data.push(data[i].data) } //console.log(arrindex); } console.log(echararr) } }```
-
JSON数组和JSON对象在vue中的获取
2021-02-01 07:00:51为了快速入门,参考了vue官网的视频,这个过程由于引入vue.js的问题走了一些弯路,这个我们以后再来探讨,因为现在主要讲的是JSON数组和JSON对象。在这个截图中(截了好几次才完美截下),红框部分是从API获取数据,...这两天在学习vue,主要是为了实现前后端的分离,因此数据的传输是必不可少的一个环节。
为了快速入门,参考了vue官网的视频,这个过程由于引入vue.js的问题走了一些弯路,这个我们以后再来探讨,因为现在主要讲的是JSON数组和JSON对象。
在这个截图中(截了好几次才完美截下),红框部分是从API获取数据,中间的语法等我们也在以后再讨论。
我发现照着这个模板来做的话,可以正常获取到数据,然而换成我自己的项目之后,就取不出来。通过我在项目打印标记,知道已经是能正常访问到我的controller,那么是在哪里导致不行呢?
观察截图箭头所指的位置json.products,说明按照这个官方提供的链接获取的json,是有一个命名为products的,通过对比我自己项目返回的数据,终于发现了一些区别。
官方链接的API:https://api.myjson.com/bins/74l63 (注意“74l63”中的“l”是英文字母“L”的小写,不是1,这里也坑了我好一会)
我自己的项目(局部):
观察开头,我们发现官方提供的是一个JSON对象,是由{"products":[{"id":……开头的,而我的项目返回的是JSON数组,[{"id":……,所以区别就在这里了。
因此,在自己的项目里,JSON数组直接是赋值就可以了。
最后,终于能够成功取值了!接下来该干嘛干嘛去吧。
这是为了整理我自己的学习笔记,也可以分享到刚好需要的人,很少写教程,不足之处还请见谅!
-
vue 根据id获取json对象数组里的对象
2021-02-24 15:22:33let materialsSupplierData=this.materialsSupplierList.find(item => item.id === this.materialsInStockData.supplierId) -
vuejs Ajax取得一个数据json数组
2021-08-06 02:59:10问题分析分两步走Ajax取得数据Vue渲染数据问题存在于如何写模板?这个是一个基础问题,我建议最好先看一下官方文档学习一下,这个和MVC的套模板标签有相似之处,也有差异之处。{{list.name}}{{list.age}}new Vue({el... -
js 获取json数组里面数组的长度
2019-10-30 17:25:57作为一个前端页面开发者第一次处理json数据,遇到了‘js 获取json数组里面数组的长度’?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋... -
Vue中怎样获取json文件中的数据
2020-12-19 10:26:34场景访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,现在在组件listcate.vue需要获取json数据。json文件内容: 文件位置: 实现musictype.json{"currentType":[1,2,11,21,22,23,24,25]}... -
vue提取json中,某一个元素的值,并且用value组成一个数组
2021-04-28 02:02:22}) //控制台值变成 [["A001"],["A002"],["A003"],["A004"],["A005"]] 但是还是不符合vant下拉框数据格式,又把获取的value值转换了一下才可以 rs.result.map(o=>{return[o.areaCode].toString()}); //控制台json变成... -
vue 获取json数据的某个属性成功,却报错
2021-01-12 03:16:28使用vue获取豆瓣电影的某个电影详细信息,数据已经获取成功,average属性也在页面上显示成功,但是控制台却报错。{{detail.title}}({{detail.original_title}}){{detail.rating.average}}分暂无评分 export default ... -
vue中根据数组中对象的属性,获取数组下标,-----findIndex()
2021-08-16 15:26:26//tableData为原数组,row.id为对象的id属性 let arr = this.tableData; let id1 = arr.findIndex((arr) => arr.id == row.id);//id1为对象的数组下标 this.tableData.splice(id1, 1);//删除该对象,实现局部刷新... -
Vue向后台传递json对象数组并取值
2020-07-07 10:17:08Vue传递json数组,后台转为json对象及图片上传 @RequestMapping("/saveshop") @ResponseBody //shopcode要与前端js中key对应 public void name(@RequestParam("shopcode") String shopcode) { // "shopcode"前台传... -
从json数组中提取所需值,组成新的json数组
2020-05-21 11:36:12从json数组中提取所需值,组成新的json数组 var dataTank =[];//创建容器 var oldData = data;//获取Json数据 for (var i=0;i<oldData.length;i++){ //提取所需值组成新数组 dataTank.push({“name”:income[i].... -
vue delete删除json数组_复习之基于Vue响应式的更新数据的方法
2020-11-20 12:16:191)更改数组的引用:如图,直接更改vm.arr2)使用数组的变异方法:push、pop、shift、unshift、splice、sort、reverse例如:数组的变异方法push3)利用Vue的set方法:vm.$set是Vue.set的别名,使用方法:Vue.set... -
Ajax获取json数组并用vue生成表格
2019-11-01 18:06:18今天尝试前后端分离,用Ajax结合Vue框架获取springMVC生成RestfulAPI的数据,JSON数组是由一个List对象生成的。最后生成的JSON数据的格式大概是这样的,里面主要是天气数据的信息和站点信息: [{“id”:null,... -
VUE获取JSON数据问题
2021-01-12 01:50:40我想用vue获取json中的conversation数组中最后一项中的content的数据,但是我的方法渲染失败了,求解。json数据部分:{"dialogue": [{"name":"a","conversation":[{"speaker":"a","content":"小伙子"},{"speaker":"b... -
vue循环数组或Json
2018-11-20 10:38:53如果只写了value 那么拿到的就是值 ,如果想拿到index索引 那么久(value,index)写法 数组的话 就能够拿到索引, 但是如果此时是一个json的话 那么拿到第二个数据 index 其实拿到是key值,json有三个值(value,key,index... -
解决vue.js提交数组时出现数组下标的问题
2020-12-13 17:08:13这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了,我们只需要 let axios = Axios.create({ baseURL: 'http://127.0.0.1:8761/', headers: {'X-Requested-With': 'XMLHttpRequest'}, ... -
vue中对象数组去重的实现
2022-02-23 14:17:41this.permarkMay = JSON.parse('[{"key":"U","value":"UDD"},{"key":"1","value":"数字"},{"key":"2","value":"宽带"},{"key":"3","value":"互动"},{"key":"A","value":"APP"},{"key":"1","value": -
Vue项目获取后端传递的json数据并在前端给json数组添加自定义数据
2019-01-03 18:29:26版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在...因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有... -
vue.js json对象数组作为数据
2020-12-20 11:19:09我想要做的是发送一个请求到我的示例API,它用一个简单的json格式化对象进行响应。 我想将这个对象作为我的组件中的数据 - 但似乎无论如何都是这样做的。Ofc我试图找到一个解决方案在stackoverflow但也许我只是失明... -
笔记:前台使用vue的ajax传递json数组数据到后台(后台的解析办法使用@RequestBody)
2019-11-23 11:06:55由于本人在使用vue.js访问后台的时候,传递json数组数据到后台,意外的出现了不能解析的错误,使用BeanUtils不能设置集合的问题的解决办法!因此记录下来! 2.想要解析vue的ajax的post请求的方法 需要在请求的方法...