將JSON數據拆分爲2組

Question

我有一個json數據，我想分成兩組數據數組 一個json數據將保存「Construct」數據值下的所有值 ，第二個json數據將保存其餘的產品和系統的價值。

我該如何將JSON分成兩部分？

{ 
    "html": [{ 
     "type": "fieldset", 
     "caption": "Construct", 
     "html": [{ 
      "title": "tooltip data for rk", 
      "name": "rk_", 
      "value": "24", 
      "caption": "DNS Servers (a list of IP addresses separated by comas)", 
      "type": "textarea" 
     }, { 
      "title": "tooltip data for rk_ntpservers", 
      "name": "rk_ntpservers", 
      "value": "111.11.11.11", 
      "caption": " separated by comas", 
      "type": "textarea" 
     }, { 
      "title": "tooltip data for ff_eth0_ff", 
      "name": "ff_eth0_ff", 
      "value": "18", 
      "caption": "Public Address (0.0.0.0 to disable)", 
      "type": "text" 
     }, { 
      "title": "tooltip data for ff_eth0_netmask", 
      "name": "ff_eth0_netmask", 
      "value": "2.2.2.0", 
      "caption": "Public rk Netmask", 
      "type": "text" 
     }, { 
      "title": "tooltip data for ff_eth1_ff", 
      "name": "ff_eth1_ff", 
      "value": "0.0.0.0", 
      "caption": "MG Device rk (0.0.0.0 to disable)", 
      "type": "text" 
     }, { 
      "title": "tooltip data for ff_eth1_netmask", 
      "name": "ff_eth1_netmask", 
      "value": "2.2.2.0", 
      "caption": "MG Device rk Netmask", 
      "type": "text" 
     }, { 
      "title": "tooltip data for ff", 
      "name": "ff_gateway", 
      "value": "1", 
      "caption": "Gateway", 
      "type": "text" 
     }] 
    }, { 
     "type": "fieldset", 
     "caption": "Product", 
     "html": [{ 
      "title": "tooltip data for product_ident", 
      "name": "product_ident", 
      "value": "78", 
      "caption": "Product Name", 
      "type": "text", 
      "disabled": "disabled" 
     }, { 
      "title": "tooltip data for product_svnversion", 
      "name": "product_svnversion", 
      "value": "7916", 
      "caption": "Revision", 
      "type": "text", 
      "disabled": "disabled" 
     }] 
    }, { 
     "type": "fieldset", 
     "caption": "System ", 
     "html": [{ 
      "title": "tooltip data for system_license", 
      "name": "system_license", 
      "value": "HH", 
      "caption": "License", 
      "type": "text" 
     }, { 
      "title": "tooltip data for system_variant", 
      "name": "system_variant", 
      "value": "normal", 
      "caption": "Variant", 
      "type": "text" 
     }] 
    }, { 
     "type": "fieldset", 
     "class": "btn-fieldset", 
     "caption": "", 
     "html": [{ 
      "type": "submit", 
      "id": "submitbtn", 
      "class": "btn btn-primary", 
      "value": "Save" 
     }] 
    }] 
} 

我更新的代碼現在工作呢

我似乎無法輸出構建組數據:(。但我可以出把resofJSONdata精細，

$(document).ready(function() // don't do anything until the document is loaded. 
{ 

    var baseUrl = "configuration.json"; 

    $.getJSON(baseUrl, function (data) // call getJSON providing the complete url with search term and a JSONP callback 
    { 
     // console.log(data.html.splice(2,3)); 
     // console.log("data " +data); 

     console.log(data.html.splice(3, 0)); // remove and log the empty fieldset 
     var constructgrp = data.html.shift(); // remove the first item (caption: "Construct") 

     var restofJSONdata = data.html; 
     alert(constructgrp); 

     $("#demo-3-form").empty(); // clear out any previous results. 
     if (data.html.length < 1) $('#demo-3-forms').html("No results. Nada. Nuttin. Zippo."); 

     //$("#demo-3-form").empty(); // clear out any previous results. 
     // if (data.html.length < 1) $('#demo-3-forms').html("No results. Nada. Nuttin. Zippo."); 
     // $.each(this.constructgrp, function() // iterate over the results, constructing the HTML for the display. 
     // { 

     var html = constructgrp.type + ' :'; 
     html += '<b>' + constructgrp.caption + '</b><br>'; 

     html += ' <br>'; 
     $.each(constructgrp.html, function() { 
      // alert(this.name); 
      html += 'Title :' + this.title + '<br>'; 
      html += 'Name :' + this.name + '<br>'; 
      html += 'Value :' + this.value + '<br> '; 
      html += 'Caption :' + this.caption + '<br><br> '; 
      // html += this.type +'<br><br> '; 
     }); 
     $('#demo-3-form').hide().append(html).fadeIn(800); // fade in the results over 2 seconds. 
     // }); 



     $.each(restofJSONdata, function() // iterate over the results, constructing the HTML for the display. 
     { 

      var html = this.type + ' :'; 
      html += '<b>' + this.caption + '</b><br>'; 

      html += ' <br>'; 
      $.each(this.html, function() { 
       // alert(this.name); 
       html += 'Title :' + this.title + '<br>'; 
       html += 'Name :' + this.name + '<br>'; 
       html += 'Value :' + this.value + '<br> '; 
       html += 'Caption :' + this.caption + '<br><br> '; 
       // html += this.type +'<br><br> '; 
      }); 
      $('#demo-3-form').hide().append(html).fadeIn(800); // fade in the results over 2 seconds. 
     }); 


    }); 
    //}); 
}); 

HTML

Answer 1

你似乎混淆了.slice()和.splice()。雖然第一個提取數組項，第二個刪除它們。也許這是你想要什麼：

console.log(data.html.splice(3)); // remove and log the 4th item and everything after 
var constructgrp = data.html.shift(); // remove the first item (caption: "Construct") 
var restofJSONdata = data.html; // take what is left over 

Answer 2

嘗試使用JavaScript的Array.reduce(...) method：

var splitData = data.html.reduce(function(memo, x) { 
    // Pick the array of "Construct" or "Other" data. 
    var arr = memo[(x.caption==='Construct' ? 'Construct' : 'Other')]; 
    [].push.apply(arr, x.html); // Push to it all of the items in the "html" array. 
    return memo; 
}, {Construct:[],Other:[]}); 

splitData.Construct; // => [{value:24,...}, ...] 
splitData.Other;  // => [{value:78,...}, ...] 

請注意，如果你只要在「產品」和「系統」的項目（而不是其他，空的），那麼當你選擇推送數據的目標數組時，你需要添加額外的檢查。

Answer 3

因爲你只需要3元，這似乎很簡單：

data.html[0] is your Construct 
data.html[1] is your Product 
data.html[2] is your System 

因此，例如，用產品和系統的陣列，簡直是：

[data.html[1],data.html[2]] 

[更新]如果你有更多的超過3個元素，只需要隔離第一個：

var firstElement=data.html.shift(); 

shift（）將同時移除第數組中的第一個元素並將其返回。