将JSON数据分为2组

Question

我有一个json数据，我想分成2组数据数组。一个json数据将保存“构造”数据值下的所有值，而第二个json数据将保存产品和系统的其余araay值和值。

如何将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"
        }]
    }]
}

我的更新代码现在正常工作

我似乎无法输出Constructor组数据:(。但是我可以把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(...)方法 ：

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

因此，例如具有Product和System的数组将简单地是：

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

[更新]如果您有3个以上的元素，而只需要隔离第一个元素：

var firstElement=data.html.shift();

shift（）将从数组中删除第一个元素并返回它。