Question

I have a json data and i want to split into 2 sets of data arrays
One json data will hold all the values under “Construct” data values
and the 2nd json data will hold the rest of the araay and values for product and system.

How do I go about split the JSON into two?

{
    "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"
        }]
    }]
}

MY UPDATED CODE now wokring

I cant seem to output the Construct group data :(. But i can out put the resofJSONdata fine,

$(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

You seem to have confused .slice() with .splice(). While the first one extracts array items, the second one removes them. Maybe this is what you want:

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