js實(shí)現(xiàn)json數(shù)組分組合并操作示例

更新時(shí)間：2019年02月12日 11:28:59 作者：東邊的小山

這篇文章主要介紹了js實(shí)現(xiàn)json數(shù)組分組合并操作,涉及javascript針對(duì)json數(shù)組的遍歷、判斷、添加、賦值等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)json數(shù)組分組合并操作。分享給大家供大家參考，具體如下：

<script>
var arr = [
  {"id":"1001","name":"值1","value":"111"},
  {"id":"1001","name":"值1","value":"11111"},
  {"id":"1002","name":"值2","value":"25462"},
  {"id":"1002","name":"值2","value":"23131"},
  {"id":"1002","name":"值2","value":"2315432"},
  {"id":"1003","name":"值3","value":"333333"}
];
var map = {},
  dest = [];
for(var i = 0; i < arr.length; i++){
  var ai = arr[i];
  if(!map[ai.id]){
    dest.push({
      id: ai.id,
      name: ai.name,
      data: [ai]
    });
    map[ai.id] = ai;
  }else{
    for(var j = 0; j < dest.length; j++){
      var dj = dest[j];
      if(dj.id == ai.id){
        dj.data.push(ai);
        break;
      }
    }
  }
}
console.log(dest);
/*
//運(yùn)行結(jié)果：
[
  {
    "id": "1001",
    "name": "值1",
    "data": [
      {"id": "1001", "name": "值1", "value": "111"},
      { "id": "1001", "name": "值1", "value": "11111"}
    ]
  },
  {
    "id": "1002",
    "name": "值2",
    "data": [
      { "id": "1002", "name": "值2", "value": "25462" },
      { "id": "1002", "name": "值2", "value": "23131"},
      {"id": "1002", "name": "值2","value": "2315432" }
    ]
  },
  {
    "id": "1003",
    "name": "值3",
    "data": [
      {"id": "1003", "name": "值3", "value": "333333" }
    ]
  }
]
*/
</script>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

PS：關(guān)于json操作，這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javasciprt下jquery函數(shù)$.post執(zhí)行無(wú)響應(yīng)的解決方法
這篇文章主要介紹了javasciprt下jquery函數(shù)$.post執(zhí)行無(wú)響應(yīng)的解決方法,需要的朋友可以參考下
2014-03-03
快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題
下面小編就為大家?guī)?lái)一篇快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫(huà)效果
這篇文章主要介紹了如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫(huà)效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
js 實(shí)現(xiàn)css風(fēng)格選擇器（壓縮后2KB）
近日在做一些OA前端界面，為了更好管理頁(yè)面代碼想寫(xiě)個(gè)js選擇器，寫(xiě)著寫(xiě)著發(fā)現(xiàn)很費(fèi)力，索性在網(wǎng)上找找看，功夫不負(fù)有心人，找到一個(gè)mini css選擇器，且性能不凡：以下代碼是壓縮后的，僅2KB
2012-01-01
JavaScript實(shí)現(xiàn)DIV層拖動(dòng)及動(dòng)態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)DIV層拖動(dòng)及動(dòng)態(tài)增加新層的方法,設(shè)計(jì)javascript操作div層的拖動(dòng)與增加的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JS是按值傳遞還是按引用傳遞
在分析這個(gè)問(wèn)題之前，我們需了解什么是按值傳遞(call by value)，什么是按引用傳遞(call by reference)。在計(jì)算機(jī)科學(xué)里，這個(gè)部分叫求值策略(Evaluation Strategy)。它決定變量之間、函數(shù)調(diào)用時(shí)實(shí)參和形參之間值是如何傳遞的。
2015-01-01
基于javascript實(shí)現(xiàn)右下角浮動(dòng)廣告效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)右下角浮動(dòng)廣告效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript+html5 canvas制作的圓中圓效果實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas制作的圓中圓效果,結(jié)合完整實(shí)例形式分析了基于JavaScript與html5 canvas技術(shù)實(shí)現(xiàn)的圖形繪制與顏色隨機(jī)填充技巧,需要的朋友可以參考下
2016-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單的雙色球(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)簡(jiǎn)單的雙色球(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文
這篇文章主要介紹了JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文,本文直接給出實(shí)例代碼,需要的朋友可以參考下
2015-06-06