JSON數(shù)組和JSON對(duì)象在vue中的獲取方法
這兩天在學(xué)習(xí)vue，主要是為了實(shí)現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個(gè)環(huán)節(jié)。
為了快速入門(mén)，參考了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 綁定對(duì)象,數(shù)組之?dāng)?shù)據(jù)無(wú)法動(dòng)態(tài)渲染案例詳解
這篇文章主要介紹了vue 綁定對(duì)象,數(shù)組之?dāng)?shù)據(jù)無(wú)法動(dòng)態(tài)渲染案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要幫助大家簡(jiǎn)單的理解vue中Props屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章主要介紹了vue-scroller記錄滾動(dòng)位置的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)利器Vite完整版詳解的相關(guān)資料,Vite是一種基于ES模塊的開(kāi)發(fā)服務(wù)器和構(gòu)建工具,專為現(xiàn)代化的前端開(kāi)發(fā)而設(shè)計(jì),需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于多個(gè)vue子路由文件自動(dòng)化合并的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue webuploader 文件上傳組件開(kāi)發(fā)
本篇文章主要介紹了vue webuploader 文件上傳組件開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件的操作代碼(后端Java)
最近項(xiàng)目中需要實(shí)現(xiàn)點(diǎn)擊按鈕下載文件的需求，前端用的vue后端使用的java代碼，今天通過(guò)本文給大家分享vue點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁(yè)面
這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)商品詳情頁(yè)功能之商品選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁(yè)功能之商品選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04