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

因此，基本上，我正在尝试将JSON文件中每个艺术家的所有相册（包括我特别难以使用的嵌套相册）添加到我的AlbumComponent中名为albums的数组中

我试图找出并学习的总体解决方案是将每个相册添加到一个数组中，这样我就可以制作一个相册组件。此页面显示每个相册，并且它们不与具有相同艺术家的其他相册耦合。这样我可以按字母顺序组织它们，等等

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

不管怎样，代码如下：

以下是服务提供的数据，以及注入到组件和其他组件中的数据。请注意，艺术家“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>

您需要将单个相册展平为单个阵列，而不是艺术家对象中的嵌套阵列。有几种可能的实现，这里我使用了Array.prototype.reduce

添加到组件逻辑

console.logflatAlbums的结果：

修改组件HTML

仅迭代新的flatAlbums数组

---

非常感谢你：D我忘了一切。减少啊。@EddieTaliaferroII很高兴它对你有用。reduce可能是所有JavaScript中我最喜欢的方法。难以置信的强大。我从这个例子开始。除了明显的部分之外，可选的第2个参数（在本例中为：[]第1个参数）作为reducer函数，将acc实例化为空数组。next只是在迭代时在原始数组中找到的下一个值。此外，如果我没有提供第二个可选参数[]，那么acc将自动实例化为迭代数组中的第一个值，然后从第二个值开始。有意义吗？@EddieTaliaferroII我花了很长时间和精力去理解。减少的力量。是我学业的公开回购协议，特别是.reduce部分。也许你会发现理解我说的“强大”的意思很有帮助。再一次，谢谢。这绝对是我比赛中的一个漏洞，今晚我将花一些时间来研究这一点，以便我能变得更好

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

  }

}

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

[ { 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' } } ]

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