JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
下面小編給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)。具體方法如下所示:
在一般情況下,我們會(huì)要求后端在列表的時(shí)候輸出一堆列表的JSON數(shù)據(jù)給我們,然后我們把這堆數(shù)據(jù)循環(huán),就能在前端上顯示列表了.
而我們?cè)趦?nèi)容頁(yè)的時(shí)候,則要求輸出一個(gè)內(nèi)容頁(yè)的JSON數(shù)據(jù)給我們,我們就可以做內(nèi)容頁(yè)了.
但是,有時(shí)候,數(shù)據(jù)并不是特別復(fù)雜,我們可能需要從列表的數(shù)據(jù)中指定其中的單條數(shù)據(jù).怎么做呢?
標(biāo)準(zhǔn)答案,find方法
var json = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
如上所示,json是一個(gè)典型的列表數(shù)據(jù).我如何指定找到ID=1的這條數(shù)據(jù)呢?
var data = json.find(function(e){return e.id == 1}); console.log(data);
通過(guò)這樣的回調(diào)函數(shù),就能找到列表數(shù)據(jù)中的單條數(shù)據(jù)了.
這段代碼用了一個(gè)find方法,并且使用了一個(gè)回調(diào)函數(shù).很優(yōu)雅的解決了這個(gè)問(wèn)題.下面,我將給出我的原始方案.
我的方案,for循環(huán)
上面的find方法是我通過(guò)搜索引擎找到的解決方法,點(diǎn)擊此處: Array.prototype.find() .而我的原始解決方案如下:
var json = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}]; var data = getJsonById(2,json); function getJsonById(id,data){ for (var i = 0; i < data.length; i++) { if (data[i].id==id) { return data[i]; } }; }
原理非常簡(jiǎn)單.通過(guò)循環(huán)遍歷,找到和條件一致的內(nèi)容,然后返回它即可.
以上內(nèi)容是小編給大家介紹的JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法,希望對(duì)大家有所幫助!
相關(guān)文章
原生js實(shí)現(xiàn)新聞列表展開(kāi)/收起全文功能
本文主要介紹了原生js實(shí)現(xiàn)新聞列表展開(kāi)/收起全文功能的知識(shí)要點(diǎn)、注意事項(xiàng)以及完整代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法,可實(shí)現(xiàn)根據(jù)文本框內(nèi)容動(dòng)態(tài)改變寬度的功能,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性的技巧,需要的朋友可以參考下2015-08-08Aptos?SDK交互實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Aptos?SDK交互實(shí)現(xiàn)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JavaScript實(shí)現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實(shí)現(xiàn)核心是使用JavaScript來(lái)控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12無(wú)縫滾動(dòng)改進(jìn)版支持上下左右滾動(dòng)(封裝成函數(shù))
無(wú)縫滾動(dòng)改進(jìn)版,封裝成函數(shù),同時(shí)支持上下左右無(wú)縫滾動(dòng)。2012-12-12原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Firefox下設(shè)為主頁(yè)的JavaScript代碼
在IE下,我們可以輕松使用以下代碼來(lái)實(shí)現(xiàn)設(shè)置主頁(yè) 但在firefox我們需要做的更多2008-09-09