如何遍歷JSON響應數據角2打字稿

我米獲得此JSON數據作爲響應和IM試圖重複「組件模板屬性」這裏面的數據顯示，「禮」標記的HTML內容
如何遍歷JSON響應數據角2打字稿

{ 
    "items": [ 
    { 
     "aliases": [ 
     "http://www.xyz.co", 
     "http://facebook.xyz.co" 
     ], 
     "styling": { 
     "tag_background_color": "#E0EAF1", 
     "tag_foreground_color": "#3E6D8E", 
     "link_color": "#0077CC" 
     }, 
     "related_sites": [ 
     { 
      "relation": "meta", 
      "api_site_parameter": "meta.xyz", 
      "site_url": "http://meta.xyz.co", 
      "name": "Meta Stack Overflow" 
     }, 
     { 
      "relation": "chat", 
      "site_url": "http://chat.xyz.co", 
      "name": "Stack Overflow Chat" 
     } 
     ], 
     "markdown_extensions": [ 
     "Prettify" 
     ], 
     "launch_date": 1221436800, 
     "closed_beta_date": 1217462400, 
     "site_state": "normal", 
     "high_resolution_icon_url": "https://cdn.sstatic.net/Sites/sxyz/img/[email protected]", 
     "favicon_url": "https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico", 
     "icon_url": "https://cdn.sstatic.net/Sites/xyz/img/apple-touch-icon.png", 
     "audience": "professional and enthusiast programmers", 
     "site_url": "http://xyz.co", 
     "api_site_parameter": "xyz", 
     "logo_url": "https://cdn.sstatic.net/Sites/stackoverflow/img/logo.png", 
     "name": "Stack Overflow", 
     "site_type": "main_site" 
    }, 
    { 
     "aliases": [ 
     "http://www.xyz.co", 
     "http://facebook.xyzw.co" 
     ], 
     "styling": { 
     "tag_background_color": "#E0EAF1", 
     "tag_foreground_color": "#3E6D8E", 
     "link_color": "#0077CC" 
     }, 
     "related_sites": [ 
     { 
      "relation": "meta", 
      "api_site_parameter": "meta.xyz", 
      "site_url": "http://meta.xyz.co", 
      "name": "Meta Stack Overflow" 
     }, 
     { 
      "relation": "chat", 
      "site_url": "http://chat.xyz", 
      "name": "Stack Overflow Chat" 
     } 
     ], 
     "markdown_extensions": [ 
     "Prettify" 
     ], 
     "launch_date": 1221436800, 
     "closed_beta_date": 1217462400, 
     "site_state": "normal", 
     "high_resolution_icon_url": "https://cdn.sstatic.net/Sites/xyz/img/[email protected]", 
     "favicon_url": "https://cdn.sstatic.net/Sites/sxyz/img/favicon.ico", 
     "icon_url": "https://cdn.sstatic.net/Sites/xyz/img/apple-touch-icon.png", 
     "audience": "professional and enthusiast programmers", 
     "site_url": "http://stackoverflow.co", 
     "api_site_parameter": "stackoverflow", 
     "logo_url": "https://cdn.sstatic.net/Sites/xyzw/img/logo.png", 
     "name": "Stack Overflow", 
     "site_type": "main_site" 
    } 
    ] 
}

我的js代碼如下所示

@Component({ 
    selector: 'http-test', 
    template: ` 
     <ul>  
      <li *ngFor="#data of httpData>{{data.items.related_sites[0].name}} //trying to iterate the response data. 
      </li> 
     </ul> 
    `, 
    providers:[HTTPTestService] 

}) 


export class HTTPTestComponent { 
    public httpData; 

    constructor (private _httpService: HTTPTestService){} 

    getStack(){ 
     this._httpService.getItemData() 
      .subscribe(    
      data =>this.httpData = JSON.stringify(data), 
      error => alert(error), 
      () =>console.log("finished") 
     ); 
    } 
    ngOnInit() { 
     this.getStack(); 
    } 
}

我已經試過，但我可以實現我想要什麼，請幫助我，謝謝

來源

2016-12-29 suresh t

試試這個

<li *ngFor="let data of httpData.items>{{data.related_sites[0].name}} //trying to iterate the response data. 
    </li>

來源

2016-12-29 13:47:39 Habeeb

概述試過，越來越例外
「EXCEPTION：錯誤：未捕獲的（在承諾）：EXCEPTION ：TypeError：無法讀取[HTTPTestComponent @ 3：13中的responseData.items]中未定義的屬性'項目'「 –

data => {this.httpData = JSON.stringify（data）; console.log（this.httpData）;}， – Habeeb

我也試過，但沒有得到答案
正在關注錯誤：
EXCEPTION：錯誤：未捕獲（承諾）：模板解析錯誤：解析器錯誤：意外的令牌），預期標識符，關鍵字或在[httpData的ngFor #DATA）]柱24在串HTTPTestComponent @ 3：13（」

] * ngFor = 「＃httpData的）」數據> {{數據}}

「）：HTTPTestComponent @ 3：13 –

請嘗試以下代碼

<ul class="menu"> 
    <li *ngFor="let item of httpData.items> 
    <ul> 
     <li *ngFor="let alias of item.aliases> 
     {{alias}}</br> 
     </li> 
    </ul> 
    .. 
    <ul> 
     <li *ngFor="let related_site of item.related_sites> 
     {{relation}} 
     {{api_site_parameter}} 
     {{site_url}} 
     {{name}} 
     </li> 
    </ul> 
    .. 
    .. 
    </li> 
</ul>

來源

2016-12-29 15:03:23

第一個問題，我看到的是，在你的getStack()功能，在那裏你訂閱HTTP響應觀察者，您將通過調用JSON.stringify(data)到string的響應。你實際上需要一個對象而不是它的JSON字符串表示，所以你可以在你的模板中引用它的屬性。

您沒有發佈HTTPTestService類的代碼，所以我們不知道在將響應傳遞給訂閱者之前是否進行了任何類型的後處理 - 可能需要調用.map(...)，。如果您將原始Observable<Response>返回給訂閱者，那麼您需要將響應正文解析爲有效的對象。您可以通過替換以下行

data =>this.httpData = JSON.stringify(data)

與

data => this.httpData = data.json()

做到這一點請注意，最好是把這個轉換在你的服務文件，它應該已經返回一個有效的對象添加到您的組件。還要確保您將解析調用放在try-catch區塊中，以防服務器返回無效的JSON響應。

一旦固定的HTTP響應的分析，你應該能夠通過你的數據迭代由Amol Bhor這個other response

來源

2016-12-29 17:12:55

如何遍歷JSON響應數據角2打字稿

回答

相關問題