How Do I Parse The Following Object Array To The Following Format For Displaying

This is the input: [{ 'PSpace': 'D1', 'Category': 'C1', 'SubCategory': 'S1', 'Pname': 'P1' }, { 'PSpace': 'D1', 'Category': 'C2', 'SubCategory': 'S2',

Solution 1:

The simplest way to do this (assuming all your data has the same object signature):

var str = '';
for (var i = 0; i < input.length; i++) {
   for (var name in input[i]) {
       str += name + ' ' + input[i][name];
   }

   str += '\n';
}

console.log(str);

Solution 2:

You could use a group change with a check of the last items and use a replacement object for the given keys of the object.

var data = [{ PSpace: "D1", Category: "C1", SubCategory: "S1", Pname: "P1" }, { PSpace: "D1", Category: "C2", SubCategory: "S2", Pname: "P2" }, { PSpace: "D1", Category: "C2", SubCategory: "S3", Pname: "P6" }, { PSpace: "D2", Category: "C6", SubCategory: "S7", Pname: "P7" }, { PSpace: "D2", Category: "C6", SubCategory: "S7", Pname: "P8" }],
    names = { PSpace: "Space", Category: "Category", SubCategory: "Sub Category", Pname: "Name" },
    result = data.map(function (o) {
        var all = false,
            r = [];

        Object.keys(o).forEach(function (k, i) {
            if (i < 3) {
                if (all || this[k] !== o[k]) {
                    r.push(names[k] + ' ' + o[k]);
                    this[k] = o[k];
                    all = true;
                }
            } else {
                r.push(names[k] + ' ' + o[k]);
            }
        }, this);
        return r;
    }, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could transforn the not normalized data into a tree object.

var data = [{ PSpace: "D1", Category: "C1", SubCategory: "S1", Pname: "P1" }, { PSpace: "D1", Category: "C2", SubCategory: "S2", Pname: "P2" }, { PSpace: "D1", Category: "C2", SubCategory: "S3", Pname: "P6" }, { PSpace: "D2", Category: "C6", SubCategory: "S7", Pname: "P7" }, { PSpace: "D2", Category: "C6", SubCategory: "S7", Pname: "P8" }],
    names = { PSpace: "Space", Category: "Category", SubCategory: "Sub Category", Pname: "Name" },
    result = data.reduce(function (t, o) {
        var path = Object.keys(o),
            last = path.pop();

        path.reduce(function (r, k, i, kk) {
            return r[o[k]] = r[o[k]] || (i < kk.length - 1 ? {} : []);
        }, t).push(o[last]);
        return t;
    }, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Solution 3:

What you need is to parse that JSON Data. I wrote a small script. You can find it here: https://jsfiddle.net/t4nn4bpj/43/

The JS code looks like this:

function stringContains(string, substring)
{
    return string.indexOf(substring) !== -1;
}
function parse()
{
        document.getElementById("myTextField").value = "";
    
    var jsonData = [{ "PSpace": "D1", "Category": "C1", "SubCategory": "S1", "Pname": "P1" }, { "PSpace": "D1", "Category": "C2", "SubCategory": "S2", "Pname": "P2" }, { "PSpace": "D1", "Category": "C2", "SubCategory": "S3", "Pname": "P6" }, { "PSpace": "D2", "Category": "C6", "SubCategory": "S7", "Pname": "P7" }, { "PSpace": "D2", "Category": "C6", "SubCategory": "S7", "Pname": "P8" }];
    
  for(var obj in jsonData)
  {
     if(jsonData.hasOwnProperty(obj))
     {
        for(var prop in jsonData[obj])
        {
            if(jsonData[obj].hasOwnProperty(prop))
            {
              var output = prop+" "+jsonData[obj][prop]+"\n";
                if(stringContains(prop,"Pname"))
                {
                    output = "Product "+jsonData[obj][prop]+"\n\n";
                }
              document.getElementById("myTextField").value += output;
            }
         }
      }
  

} }

The hmtl:

<h1 id="title">Parse JSON</h1>
<textarea id="myTextField" rows="30">click the button</textarea>
<input type="submit" id="byBtn" value="parse" onclick="parse()"/>

This outputs this in the textarea:

PSpace D1
Category C1
SubCategory S1
Product P1

PSpace D1
Category C2
SubCategory S2
Product P2

PSpace D1
Category C2
SubCategory S3
Product P6

PSpace D2
Category C6
SubCategory S7
Product P7

PSpace D2
Category C6
SubCategory S7
Product P8

Hope this helps. Ulrich