时间戳

首页 > 解决方案 > 如何将我从 API 获取的数据插入到离子卡中？

javascript - 如何将我从 API 获取的数据插入到离子卡中？

问题描述

所以这是我从 API 获得封面艺术的东西，现在我想将 img url 放在我的离子卡的 img src 中，然后我希望它为数组中的每个项目重复整个事情，如果有一个角度执行此操作的快捷方式请告诉我。

这是我的js

var discover = new XMLHttpRequest();
// variables end
discover.open('GET','https://api.deezer.com/chart');
discover.onload = function(){
var discoverdata = JSON.parse(discover.responseText);
console.log(discoverdata.tracks.data[3].album.cover_medium)
};
discover.send();

这是我的 HTML

<ion-slides id="discover">
          <ion-slide>
              <ion-card class="discover-card">
                  <img class="cover" src={} alt="">
                </ion-card>
          </ion-slide>

这是 JSON api 返回的数据

(10) […]
​
0: Object { id: 698905582, title: "Señorita", title_short: "Señorita", … }
​
1: Object { id: 648855322, title: "Old Town Road", title_short: "Old Town Road", … }
​
2: Object { id: 678017492, title: "I Don't Care", title_short: "I Don't Care", … }
​
3: Object { id: 703496412, title: "Beautiful People (feat. Khalid)", title_short: "Beautiful People (feat. Khalid)", … }
​
4: Object { id: 660051472, title: "Old Town Road (Remix)", title_short: "Old Town Road", … }
​
5: Object { id: 655095912, title: "bad guy", title_short: "bad guy", … }
​
6: Object { id: 623723282, title: "Piece Of Your Heart", title_short: "Piece Of Your Heart", … }
​
7: Object { id: 706719772, title: "Goodbyes", title_short: "Goodbyes", … }
​
8: Object { id: 684267022, title: "Cross Me (feat. Chance the Rapper & PnB Rock)", title_short: "Cross Me (feat. Chance the Rapper & PnB Rock)", … }
​
9: Object { id: 674016222, title: "Choir", title_short: "Choir", … }
​
length: 10

我希望它为每张卡片应用不同的图像。

JSON 数据中的第一个对象

0: {…}
​​
album: {…}
​​​
cover: "https://api.deezer.com/album/100856872/image"
​​​
cover_big: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/500x500-000000-80-0-0.jpg"
​​​
cover_medium: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/250x250-000000-80-0-0.jpg"
​​​
cover_small: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/56x56-000000-80-0-0.jpg"
​​​
cover_xl: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/1000x1000-000000-80-0-0.jpg"
​​​
id: 100856872
​​​
title: "Señorita"
​​​
tracklist: "https://api.deezer.com/album/100856872/tracks"
​​​
type: "album"
​​​
<prototype>: Object { … }
​​
artist: Object { id: 5962948, name: "Shawn Mendes", link: "https://www.deezer.com/artist/5962948", … }
​​
duration: 190
​​
explicit_content_cover: 0
​​
explicit_content_lyrics: 0
​​
explicit_lyrics: false
​​
id: 698905582
​​
link: "https://www.deezer.com/track/698905582"
​​
position: 1
​​
preview: "https://cdns-preview-5.dzcdn.net/stream/c-58c2f2bd81ee0d60e70310831737a910-4.mp3"
​​
rank: 998970
​​
title: "Señorita"
​​
title_short: "Señorita"
​​
title_version: ""
​​
type: "track"

提前致谢：{ )

标签： javascriptangularionic4

解决方案

注意：不要将 *ngIf 和 *ngFor 放在同一个 javascript 元素上。

*ngFor iterates array of object... 与forjavascript 中的相同。

? checks for null or undefined values.

当 Angular 在项目获得分配值之前渲染视图时，它会导致异常。?. 当项目为空或未定义时停止评估，这通常发生在异步获取数据时，例如从服务器获取可能需要相当长的时间。

下次更改检测识别更改时，将重新评估绑定。当 project 然后有一个值时，它将绑定 project.category。

尝试：-

    let data = [  <==== your data, save in variable data
    {
    "album ":[{
       "cover_image_link":""
     }
    ]
    }
    ]

    <ng-container *ngIf="data">    
       <ion-card class="discover-card" *ngFor="let item of data;let index = index">
                 <img class="cover" src={{item?.album[0].cover_image_link}} alt="">
                <div>{{item?.title}}</div>
        </ion-card>
    </ng-container>

or,

 <ng-container *ngIf="data">    
       <ion-card class="discover-card" *ngFor="let item of data;let index = index">
 <ng-container  *ngFor="let itemm of item?.album;let indexx = index">  
                 <img class="cover" src={{itemm?.cover_image_link}} alt="">
   </ng-container>
                <div>{{item?.title}}</div>
        </ion-card>
    </ng-container>

推荐阅读