javascript - 将数据从 JSON 推送到 Angular 4 组件中的数组

Question

所以，基本上，我试图将 JSON 文件中每个艺术家的所有专辑(包括嵌套专辑(我特别难以处理))添加到名为 albums 的数组中> 在我的 AlbumComponent 中。

我试图找出和学习的整体解决方案是专门将每个专辑添加到一个数组中，以便我可以制作一个Albums组件。此页面显示每个专辑，并且它们不与同一艺术家的其他专辑关联。这样我就可以按字母顺序组织它们，等等。

希望我对这个问题有正确的思考过程!

无论如何，这是代码:

这是服务提供的数据，并被注入(inject)到组件(和其他组件)中。请注意，艺术家'Flume' 有两张专辑，而其他专辑只有一张(到目前为止)。

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  constructor() { }

  data = {
    "artists": [
      {
        "artistName": "Lupe Fiasco",
        "artistsPicture": "../assets/artists-images/lupe.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "Food & Liquor",
            "albumCover": "../assets/album-covers/f&l.jpg",
            "songs": {
              "name": "Kick, Push",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Flume",
        "artistsPicture": "../assets/artists-images/flume.jpg",
        "genre": "",
        "albums": [
          { "name": "Flume",
            "albumCover": "../assets/album-covers/flume.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          },
          { "name": "Skin",
            "albumCover": "../assets/album-covers/skin.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Linkin Park",
        "artistsPicture": "../assets/artists-images/linkinpark.jpg",
        "genre": "",
        "albums": [
          { "name": "Hybrid Theory",
            "albumCover": "../assets/album-covers/meteora.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Drake",
        "artistsPicture": "../assets/artists-images/drake.jpg",
        "genre": "",
        "albums": [
          { "name": "Views",
            "albumCover": "../assets/album-covers/views.png",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "J.Cole",
        "artistsPicture": "../assets/artists-images/jcole.jpg",
        "genre": "",
        "albums": [
          { "name": "2014 Forest Hills Drive",
            "albumCover": "../assets/album-covers/fhd.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
      {
        "artistName": "Eminem",
        "artistsPicture": "../assets/artists-images/eminem.jpg",
        "genre": "",
        "albums": [
          { "name": "Marshal Matthers LP",
            "albumCover": "../assets/album-covers/mmlp.jpg",
            "songs": {
              "name": "Sleepless",
              "file": "mp3"
            }
          }
        ]
      },
    ]
  }


}

组件 HTML。这是激发这个问题的部分。当我像这样循环时，两个 'Flume' 专辑在 UI 中耦合在一起。不哦哦哦哦哦

因此它实现了显示每个专辑封面，但无法将它们与来自同一艺术家的其他专辑分开。

<div *ngFor='let x of artistData.artists'>
  <img *ngFor='let x of x.albums' src="{{x.albumCover}}" alt="">
</div>

所以我的解决方案是尝试在组件中将其全部整理出来，然后再将其显示在 UI 中。这是组件:

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../data.service';

@Component({
  selector: 'app-albums',
  templateUrl: './albums.component.html',
  styleUrls: ['./albums.component.css']
})
export class AlbumsComponent implements OnInit {

  constructor(private dataService: DataService) { }

  artistData = this.dataService.data;

  albums: any[] = [];


  ngOnInit() {
    console.log(this.albums);

  }

}

Answer 1

您需要将各个专辑展平为单个数组，而不是艺术家对象内的嵌套数组。有几种可能的实现，这里我使用了 Array.prototype.reduce()。

添加到组件逻辑

const flatAlbums = data.artists.reduce((acc, next) => {
  next.albums.forEach(album => {
    acc.push(album);
  });
  return acc;
}, []);

console.log(flatAlbums)的结果:

[ { name: 'Food & Liquor',
    albumCover: '../assets/album-covers/f&l.jpg',
    songs: { name: 'Kick, Push', file: 'mp3' } },
  { name: 'Flume',
    albumCover: '../assets/album-covers/flume.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Skin',
    albumCover: '../assets/album-covers/skin.png',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Hybrid Theory',
    albumCover: '../assets/album-covers/meteora.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Views',
    albumCover: '../assets/album-covers/views.png',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: '2014 Forest Hills Drive',
    albumCover: '../assets/album-covers/fhd.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } },
  { name: 'Marshal Matthers LP',
    albumCover: '../assets/album-covers/mmlp.jpg',
    songs: { name: 'Sleepless', file: 'mp3' } } ]

修改组件 HTML

仅迭代新的 flatAlbums 数组。

<div *ngFor='let x of flatAlbums'>
  <img src="{{x.albumCover}}" alt="">
</div>