将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（）将同时移除第数组中的第一个元素并将其返回。