爲什麼我不能通過使用鍵而不是索引角2來讀取json數據？

我目前正在使用angular 2並通過api接收我的json數據。我以下面的格式收到了這些數據。爲什麼我不能通過使用鍵而不是索引角2來讀取json數據？

{ 
    "totalItems": 2719, 
    "totalPages": 272, 
    "results": [ 
     { 
      "SNR_Title": "Acer - 11 11.6\" Refurbished Chromebook - Intel Celeron - 4GB Memory - 16GB eMMC Flash Memory - Gray", 
      "SNR_Brand": "Acer", 
      "SNR_Description": "Refurbished Acer 11 Chromebook: Slip the Acer Chromebook into your bag and work from anywhere, without recharging, because it has enough battery life to last for a long time on a single charge. Learn more about refurbished products &#8250; Learn more about Chromebooks &#8250;", 
      "SNR_ImageURL": "https://img.bbystatic.com/BestBuy_US/images/products/5676/5676707_sa.jpg", 
      "SNR_ModelNo": "NX.GC1AA.002", 
      "SNR_UPC": "841631108389", 
      "SNR_SKU": "5676707", 
      "SNR_ProductURL": "https://api.bestbuy.com/click/-/5676707/pdp", 
      "SNR_Price": "169.99", 
      "SNR_Available": "BESTBUY" 
     }, 
     { 
      "SNR_Title": "Acer - 11.6\" Chromebook - Intel Celeron - 2GB Memory - 16GB eMMC Flash Memory - White", 
      "SNR_Brand": "Acer", 
      "SNR_Description": "Acer Chromebook: Browse the Internet and tackle work or school projects with this Acer Chromebook. An 11.6-inch LED backlit display and an Intel HD graphics card provide a rich viewing experience for images and video, and a built-in webcam lets you place video calls with crisp clarity. With its compact size and 9-hour battery life, this Acer Chromebook is ideal for travel. Learn more about Chromebooks &#8250;", 
      "SNR_ImageURL": "https://img.bbystatic.com/BestBuy_US/images/products/4963/4963801_sa.jpg", 
      "SNR_ModelNo": "CB3131C3SZ", 
      "SNR_UPC": "888863408634", 
      "SNR_SKU": "4963801", 
      "SNR_ProductURL": "https://api.bestbuy.com/click/-/4963801/pdp", 
      "SNR_Price": "179.0", 
      "SNR_Available": "BESTBUY" 
     } 
] 
}

和我的服務或.ts類，我收到這樣的樣子。

GetAllMobile:Object 
    constructor(private httpService: HttpService) { 
     this.httpService.getAllMobiles(1).subscribe(
    data => { 
     const myArray = []; 


     for (let key in data) { 
     myArray.push(data[key]); 

// console.log(this.GetAllMobile) 
     } 
     this.GetAllMobile=(myArray) 
    } 
);

但我無法讀取我的HTML GetAllMobile.results，但我可以用指數喜歡GetAllMobile訪問[2]。我到目前爲止試過的是以下。

//Not worked 
    <div *ngFor="let item of GetAllMobile"> 
     <h2> 
      Total {{item.totalItems}} {{item.totalPages}} AMAD 
     </h2> 
      <div *ngFor="let x of item.results"> 
     <p> 
      {{x.SNR_Title}} 
     </p> 
     </div> 
    </div> 


//this woked but i don't needed this approach 
<div *ngFor="let mobile of GetAllMobile[2]"> 
    <h2>{{ mobile.SNR_Title}}</h2> 
    </div>

但我可以通過使用索引讀取。但由於某些原因，我想通過密鑰讀取數據。可以有人告訴我什麼是正確的方法來讀取角度2這個數據。任何幫助或建議，高度讚賞。

來源

2017-06-10 maadi

響應不一個數組，但具有「結果」數組的對象。因此，你應該'GetAllMobile.results'分配給'data.results' – Laazo

你能給我一些代碼幫助嗎？ – maadi

您試圖在複雜的事情有點:)

你可以只分配響應你是這樣得到的，不需要嘗試和循環它。所以只是這樣做：

this.httpService.getAllMobiles(1).subscribe(data => { 
    this.GetAllMobiles = data; 
})

然後你的模板看起來像下面的樣子。請注意，我們正在刪除第一個迭代，因爲沒有什麼可以迭代。 GetAllMobile是一個對象。我們保持第二次迭代，因爲您要迭代對象內的results數組。

<h2>Total {{GetAllMobile?.totalItems}} {{GetAllMobile?.totalPages}} AMAD</h2> 
<div *ngFor="let x of GetAllMobile?.results"> 
    <p>{{x.SNR_Title}}</p> 
</div>

注意使用safe navigation operator。它保護了null和undefined屬性路徑。由於數據異步來臨，使用安全的導航操作符是很好的。在這種情況下，這也可以通過只初始化變量GetAllMobile來解決，但它是有用的瞭解在神奇的異步世界的安全導航操作:)

最後，這裏有一個DEMO

來源

2017-06-11 07:59:51 Alex

沒問題，很高興我能幫忙！ :) – Alex

試圖聲明GetAllMobile這樣的：

GetAllMobile : Array<{totalItems: String, totalPages: string,results: Array<any>}>;

希望這將幫助你:)

來源

2017-06-11 00:32:42

爲什麼我不能通過使用鍵而不是索引角2來讀取json數據？

回答

相關問題