JSON數(shù)組和JSON對(duì)象在vue中的獲取方法
這兩天在學(xué)習(xí)vue，主要是為了實(shí)現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個(gè)環(huán)節(jié)。
為了快速入門，參考了vue官網(wǎng)的視頻，這個(gè)過(guò)程由于引入vue.js的問(wèn)題走了一些彎路，這個(gè)我們以后再來(lái)探討，因?yàn)楝F(xiàn)在主要講的是JSON數(shù)組和JSON對(duì)象。
在這個(gè)截圖中（截了好幾次才完美截下），紅框部分是從API獲取數(shù)據(jù)，中間的語(yǔ)法等我們也在以后再討論。
我發(fā)現(xiàn)照著這個(gè)模板來(lái)做的話，可以正常獲取到數(shù)據(jù)，然而換成我自己的項(xiàng)目之后，就取不出來(lái)。通過(guò)我在項(xiàng)目打印標(biāo)記，知道已經(jīng)是能正常訪問(wèn)到我的controller，那么是在哪里導(dǎo)致不行呢？
觀察截圖箭頭所指的位置json.products，說(shuō)明按照這個(gè)官方提供的鏈接獲取的json，是有一個(gè)命名為products的，通過(guò)對(duì)比我自己項(xiàng)目返回的數(shù)據(jù)，終于發(fā)現(xiàn)了一些區(qū)別。
官方鏈接的API：https://api.myjson.com/bins/74l63 （注意“74l63”中的“l”是英文字母“L”的小寫(xiě)，不是1，這里也坑了我好一會(huì)）
我自己的項(xiàng)目（局部）：
觀察開(kāi)頭，我們發(fā)現(xiàn)官方提供的是一個(gè)JSON對(duì)象，是由{"products":[{"id":……開(kāi)頭的，而我的項(xiàng)目返回的是JSON數(shù)組，[{"id":……，所以區(qū)別就在這里了。
因此，在自己的項(xiàng)目里，JSON數(shù)組直接是賦值就可以了。
最后，終于能夠成功取值了！接下來(lái)該干嘛干嘛去吧。
這是為了整理我自己的學(xué)習(xí)筆記，也可以分享到剛好需要的人，很少寫(xiě)教程，不足之處還請(qǐng)見(jiàn)諒！
Vue項(xiàng)目JSON格式字符串和對(duì)象之間的互轉(zhuǎn)
1、將對(duì)象轉(zhuǎn)換為JSON格式字符串
JSON.stringify(object)
2、將JSON字符串轉(zhuǎn)換為對(duì)象
JSON.parse(jsonString);
到此這篇關(guān)于JSON數(shù)組和JSON對(duì)象在vue中的獲取方法的文章就介紹到這了,更多相關(guān)vue獲取json數(shù)組和json對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在 Vue 3 中,v-bind?指令用于將表達(dá)式的值綁定到 DOM 元素的屬性上,這個(gè)指令的語(yǔ)法與 Vue 2 相同,但有一些細(xì)微的變化和改進(jìn),這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08
vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法
vue項(xiàng)目中使用elementUI的el-form組件,里面有部分后端數(shù)據(jù)遍歷的字段和部分確定的字段,遇到個(gè)問(wèn)題遍歷的字段可以修改值但是確定的幾個(gè)字段無(wú)法修改值,下面小編給大家分享vue elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)的問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-12-12
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來(lái),我們就直接一個(gè)個(gè)來(lái)看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-07-07
下面小編就為大家?guī)?lái)一篇基于Vue單文件組件詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3封裝echarts組件的實(shí)現(xiàn)步驟
這篇文章主要介紹了如何在Vue3中封裝一個(gè)高效、可復(fù)用的ECharts組件TChart,該組件支持響應(yīng)式圖表、空數(shù)據(jù)展示、事件監(jiān)聽(tīng)、主題切換和性能優(yōu)化等功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例
下面小編就為大家?guī)?lái)一篇vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue?提供了雙向數(shù)據(jù)綁定機(jī)制,使得開(kāi)發(fā)者可以輕松地將表單組件的值與?Vue?實(shí)例中的數(shù)據(jù)進(jìn)行關(guān)聯(lián),本文將詳細(xì)介紹如何在?Vue?中使用這些表單組件,并實(shí)現(xiàn)雙向數(shù)據(jù)綁定,需要的可以參考下2024-03-03
elementUI Tree 樹(shù)形控件的官方使用文檔
這篇文章主要介紹了elementUI Tree 樹(shù)形控件的官方使用文檔，用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開(kāi)或折疊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04