JSON数组和JSON对象在vue中的获取方法

 更新时间:2022年09月21日 10:11:11   作者:潇I洒  
这两天在学习vue,主要是为了实现前后端的分离,因此数据的传输是必不可少的一个环节,这篇文章主要介绍了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跳转页签传参并查询参数的保姆级教程

    vue跳转页签传参并查询参数的保姆级教程

    这篇文章主要介绍了vue跳转页签传参并查询参数的保姆级教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • element plus如何为表格某列数据文字设置颜色样式

    element plus如何为表格某列数据文字设置颜色样式

    实习工作需要根据表格的状态字段来设置列的样式,所以这篇文章主要给大家介绍了关于element plus如何为表格某列数据文字设置颜色样式的相关资料,需要的朋友可以参考下
    2023-10-10
  • VueJs组件之父子通讯的方式

    VueJs组件之父子通讯的方式

    这篇文章主要介绍了VueJs组件之父子通讯的方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue3.2 reactive函数问题小结

    vue3.2 reactive函数问题小结

    reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式),这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下
    2022-12-12
  • Vue.set()实现数据动态响应的方法

    Vue.set()实现数据动态响应的方法

    这篇文章主要介绍了Vue.set()实现数据动态响应的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 详解vue数据渲染出现闪烁问题

    详解vue数据渲染出现闪烁问题

    本篇文章主要介绍了vue数据渲染出现闪烁问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue中设置、获取、删除cookie的方法

    vue中设置、获取、删除cookie的方法

    今天小编就为大家分享一篇vue中设置、获取、删除cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue axios二次封装

    详解vue axios二次封装

    这篇文章给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
    2018-07-07
  • vue通过style或者class改变样式的实例代码

    vue通过style或者class改变样式的实例代码

    这篇文章主要介绍了vue通过style或者class改变样式的实例代码,在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下
    2018-10-10
  • vue 组件内获取actions的response方式

    vue 组件内获取actions的response方式

    今天小编就为大家分享一篇vue 组件内获取actions的response方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论