检查后从JSON数据填充数据

时间:2018-01-22 19:28:27

标签: json angular loops

我有点困惑,经过花了很多时间,我没有找到任何解决问题的好办法。所以,即使没有浪费我的时间,我也要解释我的问题。

我有一个JSON数据,数据[]有不同的对象,如下所示:

{
  "data": [
     {
       "id": 1,
       "name": "XYZ", 
       "course": {
           "id": 25,
           "name": "XYZ",
           "description": "",
           "teacher": {
               "id": 4,
               "name": "",
               "email": "",
               "role": "",
               "token": "",
               "about": "Blah blah blah ",
               "phone": "2222222222",
               "image_url": "",
               "payment_information": {}
            },
            "image": "",
            "cover_image": "",
            "course_type": "",
            "ongoing": true,
            "price": 10,
            "students_count": 4,
            "lesson_price": 2.5,
            "drop_in_price": 12,
            "lessons_data": {
                 "first_lesson_at": "",
                 "last_lesson_at": "",
                 "next_lesson_at": ""
            },
            "data": {
               "number_of_classes": "",
               "start_time": "06:45",
               "day_of_week": "Tuesday",
               "duration": "-300",
               "start_date": "2017-11-07T06:45:04.000-0800",
               "end_time": "06:50"
            }
       },
       "start_time": "2018-01-23T14:45:00.000Z",
       "end_time": "2018-01-23T14:50:00.000Z",
       "zoom_url": "http://zoom.us/j/5124648907"
     }
   ]
 }

这只是我向你展示的一个对象,但数据数组中还有很多其他对象。

我有一个小块,它有一个块并接受标题,我们将在后面看。所以首先我想循环遍历数据对象并检查时间戳是否为' date是否与另一个匹配,然后在在我的HTML中使用* ngFor

之后获取该小部件的特定数量

现在我在JSON数据中有7个对象,在从时间戳得到结果后,我有4个具有相似start_time的对象(2个相同,其他2个相同)。

更多信息:

JSON数据

1周三来自时间戳

周四来自时间戳的2个对象

带有星期五时间戳的2个对象

1,周六来自时间戳

所以根据上面的数据,我们只得到4块,但我已经尝试找到一些解决方案,但失败了。

我试过这样做

<div *ngFor="les lesson of lessons">
   <widget-app-block [title]="lesson.start_time | date: 'EEEE, MMMM d'"></widget-app-block>
</div>

但它会打印所有7个块,并为所有7个块打印时间。但是我们需要在这里只获得4个块,这些块将在检查后进行排序。

可能的尝试

我已阅读使用HERE 中的* ngIF-else条件,所以我所做的是尝试从我的TYPESCRIPT文件中获取结果并尝试将其与课程相匹配来自我的html中的foreach循环的变量,然后传递标题,否则只打印单个对象的时间戳,但没有成功。

打字稿

ngAfterViewInit() {
  this.http.get("/lessons").subscribe(data => {
    this.lessons = castCollection(data['data'], Lesson)

    for(let time of this.lessons){
      this.timeTitle = time.start_time 
    }
  })
}

然后将其与我的html

中的课程变量进行比较

HTML

<div *ngFor="let lesson of lessons">
   <div *ngIf="lesson.start_time === timeTitle; else elseTimeBlock">
     <widget-app-block [title]="timeTitle | date: 'EEEE, MMMM d'"></widget-app-block>
   </div>
   <ng-template #elseTimeBlock>
      <widget-app-block [title]="lesson_start_time | date: 'EEEE, MMMM d'"></widget-app-block>
   </ng-template>
</div>

但没有运气。由于我的数据提取工作正常,所以现在我必须只关注数据本身。任何人都可以帮助我。我很感激学习新事物。因为这非常棘手。

1 个答案:

答案 0 :(得分:0)

听起来你需要的是过滤你的列表以匹配特定的时间戳。我在这里有关于过滤Angular数据的博客文章:https://blogs.msmvps.com/deborahk/filtering-in-angular/

这样的事情:

kubectl create -f my-example-deployment.yml

我已对字符串进行过滤,但您可以将其更改为过滤时间戳。

有关完整代码,请参阅博客文章。