deeply nested json with angular2

Question

i am new in angular2 and trying to display my data which is in json using angular2

below is my json data:

{
   "logoEditorData":{
      "logo":{
         "companyNameOption":{
            "fontSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "letterSpacing":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "FontCases":[
               "upper",
               "lower"
            ]
         },
         "taglineNameOption":{
            "fontSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "letterSpacing":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "FontCases":[
               "upper",
               "lower"
            ]
         },
         "commonSetting":{
            "iconTextSize":{
               "currentValue":0,
               "minValue":1,
               "maxValue":100
            },
            "logoSize":{
               "currentValue":50,
               "minValue":1,
               "maxValue":100
            },
            "iconDistance":{
               "currentValue":40,
               "minValue":1,
               "maxValue":100
            },
            "taglineSize":{
               "currentValue":60,
               "minValue":1,
               "maxValue":100
            }
         },
         "commonFonts":{
            "companyNameFont":{
               "selected":[
                  "sansSerief"
               ],
               "sansSerif":{
                  "fontImage":"..\/src\/images\/sans-serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               },
               "serif":{
                  "image":"..\/src\/images\/serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               }
            },
            "taglineNameFont":{
               "selected":[
                  "sansSerief"
               ],
               "sansSerif":{
                  "fontImage":"..\/src\/images\/sans-serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               },
               "serif":{
                  "image":"..\/src\/images\/serif.png",
                  "fontList":[
                     "open-sans",
                     "lato",
                     "oswald",
                     "roboto",
                     "exo",
                     "ubuntu",
                     "istok"
                  ],
                  "description":"Clean logotypes that convey simplicity, power, and confidence."
               }
            }
         }
      },
      "colors":{
         "image":"abc"
      },
      "layout":{
         "placement":[
            "iconSingle",
            "iconTextLeft",
            "iconTextTop",
            "text"
         ],
         "container":{
            "none":"none",
            "iconOnly":"icon",
            "iconWithText":"both",
            "whole":"whole"
         }
      }
   }
}

i created a service for this then try to subscribe my data in my app component with ngfor, i also try to solve my problem using pipes but didn't get expected result. is there any way we can get data like we do in jquery using $.each with key and value corresponding its nested loop in jquery.

can anyone help me out?

is this what you want? stackblitz.com/edit/angular-json-sample — Prithivi Raj
– Prithivi Raj, Commented Nov 18, 2017 at 16:03

Prithivi Raj · Accepted Answer · 2017-11-19 04:43:03Z

1

Get the keys of your JSON object using Object.keys(). Below code will return all the keys inside logoEditorData i.e., logo, colors and layouts. Now you can iterate this keys over json object to find the value. sample code

In TS file

constructor(){
  this.jsonDataKeys=Object.keys(this.jsonData.logoEditorData);
}

In HTML file

<div *ngFor="let item of jsonDataKeys">
   <div>Key : {{item}} Value: {{jsonData.logoEditorData[item] | json}}</div>
  </div>

answered Nov 19, 2017 at 4:43

Prithivi Raj

2,7361 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

deeply nested json with angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related