javascript - 访问 JSON 中的项目 [使用 Typescript/Angular2]

Question

我的 JSON 是什么样的:

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

组件中的我的 HTML 文件模板

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

我的 component.ts 方法是什么样的:

//<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>

我的服务代码:

//.... 
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');
      });
  }
  // ....

在 component.ts 文件中，我已经将 this.reportNavJSONMain 初始化为一个对象(我也将它初始化为一个对象数组)但是当我使用 console.log() 或 console.dir( ) 它，它始终将其显示为“对象”。我尝试了 JSON.parse()、JSON.stringify() 和两者，但都没有用。

我的目标是从 this.reportNavJSONMain 访问 reportSections 但是当我访问 this.reportNavJSONMain.reportSections 时，reportSections 不是this.reportNavJSONMain.但是，当我 console.dir(this.reportNavJSONMain) 或 console.log(this.reportNavJSONMain) 时，它会显示:

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

Answer 1

你不能导航/迭代一个字符串，但你可以一个对象!

(我假设 this.reportNavJSONMain 被声明为 var 或 Object)

如果数据的类型是Object

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

如果数据是String类型

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

---

如何在 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);
  })
});