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