订购 Json 对象答案

【问题标题】：Order Json object订购 Json 对象
【发布时间】：2018-01-31 08:55:11
【问题描述】：

我正在使用 Angular 4 创建一个简单的电影列表应用程序。我正在发出 HTTP GET 请求以获取存储在 json 文件中的所有电影。他们有一些字段，如“Id”、“Title”、“Genre”、“Duration”等。当我列出所有电影时，我如何按 ID 降序对它们进行排序，以便最后一个出现在第一位？

这是我用来获取此 json 数据的代码：

在我的数据服务文件上：

getMovies(){
      return this.http.get('assets/data/movies.json')
      .map(res => res.json());
   }

在我的 component.ts 文件中：

export class MainComponent implements OnInit {
  movies: Movies[];
  username:string;
  userimg:string;

  constructor(private userService:UserService, private dataService:DataService) { }

  ngOnInit() {

    this.dataService.getMovies().subscribe((movies) =>{
        this.movies = movies;
    });


  }


}

interface Movies {
    id:number,
    title:string,
    year:number,
    rating:number,
    cover:string,
    genre:string,
    duration:string,
    description:string,
    favourite:number
}

在我的 component.html 文件中：

<div *ngFor="let movie of movies" class="row row-movies">
              <a [routerLink]="['/movies', {'id': movie.id}]">
                <div class="col-md-9">
                    <h3> {{movie.title}}</h3>
                    <h4> {{movie.year}}</h4>
                    <h4> {{movie.rating}}</h4>
                    <p>{{movie.description}}</p>
                    <h5> {{movie.genre}}</h5>
                    <h5> {{movie.duration}}</h5>
                </div>
                <div class="col-md-3">
                  <img src="../assets/img/capas/movies/{{movie.capa}}" class="img-responsive capa-filme" width="350px" />
                </div>
              </a>
      </div>

你能帮帮我吗？我对 Angular 还是很陌生..

【问题讨论】：

标签： json angular http get

【解决方案1】：

这个问题与角度无关。加载电影后，您需要执行以下操作：

this.movies.sort((a,b) => (b.id - a.id));

请注意：这可以使用原版 javascript 中的任何数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

【讨论】：

【解决方案2】：

如果您不需要更改排序，可以在检索数据时进行。

this.dataService.getMovies().subscribe((movies) =>{
        movies.sort((a, b) => {
           return a.id < b.id ? 1 : -1;
     });
     this.movies = movies;
 });

注意：我没有进行语法检查。

【讨论】：