Accessing items inside a JSON [Using Typescript/Angular2]

Question

What my JSON looks like:

{
  "reportSections": [
    {
      "name": "...",
      "display": true,
      "nav": false,
      "reportGroups": {
        "reports": [
          {
            "name": "...",
            "url": "reportLibrary.tableau",
            "nav": true,
            "params": {
              "reportName": "clientRelationshipReport",
              "reportTitle": "Client Relationship Report",
              "reportUrl": "...",
              "reportHeight": "4030px"
            },
            "filters": "clientName,brokerName,entity,budgetClass,practice,office"
          }
        ]
      }
    }
  ]
}

My HTML File template in the component

<li *ngFor = "let sectionName of reportNavJSONMain.reportSections">
     <span> {{ sectionName.name }} </span>
     <ul>
       <li *ngFor="let report of sectionName.reportGroups.reports">
          <a *ngIf="report.nav"> {{report.name}} </a>
       </li>
      </ul>
 </li>

What my component.ts method looks like:

//<irrelevant code> 
....
getReports(): any {
    new Promise((resolve,reject)=>{
      resolve(
        this.reportNavService.getJSONReportMain()
      )
    }).then((data)=>{
      // console.dir(JSON.parse(JSON.stringify(data)));
      this.reportNavJSONMain = JSON.stringify(data);
      console.dir(this.reportNavJSONMain )
    })
  }
  ...
  //<irrelevant code>

My service code:

//.... 
public getJSONReportMain(): Promise<any> {
    return this.http.get('...')
      .toPromise()
      .then((response: Response)=>{
        //console.log(JSON.stringify(response.json()))
        this.reportNavJSON = JSON.stringify(response.json());
        return this.reportNavJSON;
      }).catch((error: Response)=>{
        return Observable.throw('Error');
      });
  }
  // ....

In component.ts file, I have initialized this.reportNavJSONMain as an object (I have also initialized it as an array of objects) but when I console.log() or console.dir() it, it always displays it as an "Object". I tried JSON.parse(), JSON.stringify(), and both but none of it worked.

My goal here is to access reportSections from this.reportNavJSONMain but when I do this.reportNavJSONMain.reportSections, reportSections is not part of this.reportNavJSONMain. However when I console.dir(this.reportNavJSONMain) or console.log(this.reportNavJSONMain), it displays this:

{"reportSections":[
     {"name":"...","display":true,"nav":true,"reportGroups":
          {"reports":
              [{"name":"Client Relationship Report","url": .....}

@Zze, yes I can, what's the proper formatting to make it look more readable? — its.david
– its.david, Commented Nov 28, 2017 at 21:22

Zze · Accepted Answer · 2017-11-28 21:54:43Z

1

You can't navigate / iterate a string, but you can an object!

(I assume this.reportNavJSONMain was declared either as a var or Object)

If data is of type Object

).then((data)=>{
    this.reportNavJSONMain = data;
})

If data is of type String

).then((data)=>{
    this.reportNavJSONMain = JSON.parse(data);
})

An example of how to implement this in Javascript,

var object = {
  "reportSections": [
    {
      "name": "...",
      "display": true,
      "nav": false,
      "reportGroups": {
        "reports": [
          {
            "name": "...",
            "url": "reportLibrary.tableau",
            "nav": true,
            "params": {
              "reportName": "clientRelationshipReport",
              "reportTitle": "Client Relationship Report",
              "reportUrl": "...",
              "reportHeight": "4030px"
            },
            "filters": "clientName,brokerName,entity,budgetClass,practice,office"
          }
        ]
      }
    }
  ]
}

var p = new Promise((resolve, reject) => {
  resolve(object);
});

p.then((data) => {
  data.reportSections.forEach((section) => {
    console.log(section.reportGroups);
  })
});

edited Nov 28, 2017 at 21:54

answered Nov 28, 2017 at 21:03

Zze

18.9k14 gold badges95 silver badges125 bronze badges

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

5 Comments

its.david Over a year ago

I don't think this.reportNavJSONMain is a string? The console would have displayed quotations marks around the object

Zze Over a year ago

@ezzzCash This is the code you posted: this.reportNavJSONMain = JSON.stringify(data); that converts an object to a string. Did you want JSON.parse() ?

its.david Over a year ago

When I do JSON.parse(), it displays "Object" on the console with the attributes of the JSON underneath. However, I still can't access reportSections

its.david Over a year ago

okay so I initialized it as

.then((data: Object)=>{       this.reportNavJSONMain = data;       console.dir(this.reportNavJSONMain.reportSections);       console.dir(this.reportNavJSONMain);     })

but this.reportNavJSONMain.reportSections is now 'undefined' on the console (which was my original problem)

Zze Over a year ago

@ezzzCash I've added a javascript snippet which mimics the correct functionality - hope this clarifies my answer.

David Sherman · Accepted Answer · 2017-11-28 21:04:01Z

0

You're turning your JSON result into a string with JSON.stringify(), on your http result you want to call result.json() in your service. This way you emmediately have the result as json.

edited Nov 28, 2017 at 21:04

answered Nov 28, 2017 at 21:01

David Sherman

4404 silver badges10 bronze badges

2 Comments

its.david Over a year ago

Sorry, I forgot to show you the code in my service, I'm already doing that. I will edit my question to add my code in service

David Sherman Over a year ago

In your service you are also returning a string, just return response.json() from service and put that in the reportNavJSONMain property in your component.

Collectives™ on Stack Overflow

Accessing items inside a JSON [Using Typescript/Angular2]

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related