JSON数组和JSON对象在vue中的获取方法
这两天在学习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项目JSON格式字符串和对象之间的互转
1、将对象转换为JSON格式字符串
JSON.stringify(object)
2、将JSON字符串转换为对象
JSON.parse(jsonString);
到此这篇关于JSON数组和JSON对象在vue中的获取方法的文章就介绍到这了,更多相关vue获取json数组和json对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在 Vue 3 中,v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上,这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进,这篇文章主要介绍了Vue3 v-bind 指令的基本用法,需要的朋友可以参考下2024-08-08
vue elementUI el-form 数据无法赋值且不报错的问题及解决方法
vue项目中使用elementUI的el-form组件,里面有部分后端数据遍历的字段和部分确定的字段,遇到个问题遍历的字段可以修改值但是确定的几个字段无法修改值,下面小编给大家分享vue elementUI el-form 数据无法赋值且不报错的问题及解决方法,感兴趣的朋友一起看看吧2023-12-12
Vue 3 提供了多种数据传递的方式,让我们的组件之间可以尽情地交流,接下来,我们就直接一个个来看,这些方式都是怎么工作的,感兴趣的小伙伴跟着小编一起来看看吧2024-07-07
下面小编就为大家带来一篇基于Vue单文件组件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue窗口变化onresize,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了如何在Vue3中封装一个高效、可复用的ECharts组件TChart,该组件支持响应式图表、空数据展示、事件监听、主题切换和性能优化等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Vue 提供了双向数据绑定机制,使得开发者可以轻松地将表单组件的值与 Vue 实例中的数据进行关联,本文将详细介绍如何在 Vue 中使用这些表单组件,并实现双向数据绑定,需要的可以参考下2024-03-03
这篇文章主要介绍了elementUI Tree 树形控件的官方使用文档，用清晰的层级结构展示信息，可展开或折叠。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论