如何将以下对象数组解析为以下格式以显示

Question

This is the input:

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

Desired Output

In a single array each Department should have an array of related Category, each Category should have an array of related Subcategory and each Subcategory should have an array of related Products

so that i can iterate through a single array an display products as attached

Answer 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);

Answer 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; } 

Answer 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