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