我如何迭代 json 数据数组以始终获取第一个 json 对象答案

【问题标题】：How do i iterate an array of json data to always get the first json object我如何迭代 json 数据数组以始终获取第一个 json 对象
【发布时间】：2021-11-10 05:40:09
【问题描述】：

我正在尝试从视频数组中获取第一个 json 对象，我只想获取完整的亮点而不是目标

{
"response": [
    {
    title: "United vd Chelsea",
  "videos": [
            {
                "title": "Highlights",
                "embed": "<div>Full highlight video is embed here</div>"
            },
            {
                "title": "goal 1",
                "embed": "<div>goal is embed here</div>"
            },
            {
                 "title":"goal 2",
                "embed": "<div>goal is embed here</div>"
           }]
        },
    {
    title: "Arsenal vs Lfc",
  "videos": [
            {
                "title": "Highlights",
                "embed": "<div>Full highlight video is embed here</div>"
            },
            {
                "title": "goal 1",
                "embed": "<div>goal is embed here</div>"
            },
            {
                 "title":"goal 2",
                "embed": "<div>goal is embed here</div>"
           }]
        } ....}

这是我的 component.html ，它返回完整的亮点和目标视频。我只想要完整的精彩视频

<div  *ngFor="let results of data.response.slice(0,6)">
             <div class="panel panel-default">
                <div *ngFor="let result of results.videos">
                    <p [innerHTML]="result.embed | safe">  </p>
                    <p>{{result.title}}</p> 
                </div>

谁能帮忙

【问题讨论】：

使用ngIf='result.title.includes('Highlights')'

标签： json angular

【解决方案1】：

解决方案 1

从results.videos 和slice 中提取带有title: Highlight 的第一项。

假设：'Highlight'元素将位于results.videos数组的第一个元素中。

<div *ngFor="let result of results.videos.slice(0, 1)">
  <p [innerHTML]="result.embed"></p>
  <p>{{ result.title }}</p>
</div>

Sample Solution 1 on StackBlitz

解决方案 2（首选）

更喜欢这个解决方案。使用*ngIf 仅在result.title == 'Highlights' 时显示HTML 元素。

<div *ngFor="let result of results.videos">
  <ng-container *ngIf="result.title == 'Highlights'">
    <p [innerHTML]="result.embed"></p>
    <p>{{ result.title }}</p>
  </ng-container>
</div>

Sample Solution 2 on StackBlitz

【讨论】：