如何在angular 4中過濾JSON數據

Question

我正在嘗試填充頁面上的數據，但是它沒有在頁面上呈現。 相反，它拋出一個錯誤消息：

core.es5.js：1020錯誤語法錯誤：JSON中位置322的意外令牌'

問題-card.component.ts

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

@Component({
  selector: 'app-question-card',
  templateUrl: './question-card.component.html',
  styleUrls: ['./question-card.component.css']
})
export class QuestionCardComponent implements OnInit {
 question = '';
 questions = [];
  constructor(private retrieveDataService: RetrieveDataService) {
    this.appendContent();  
  }

  ngOnInit() {
  }

  appendContent(){
    for (var i = 0; i < 5; i++) {
      this.retrieveDataService.fetchData().subscribe(data=>{
            if (data[i].type == "question-card") {
                this.question = (data[i].question);
                this.questions.push(this.question);
            }
       });  
    }
  }
}

問題-card.component.html

<div class="container" *ngFor="let question of questions">
<h3>{{question.section}}</h3>
</div>

檢索，data.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class RetrieveDataService {
  constructor(private http: Http) { 
  }
  fetchData(){
      return this.http.get('assets/page-content.json').map(
        (response) => response.json()
      )
  }
}

頁面content.json

[
    {
        "id": 1,
        "type": "question-card",
        "section": "some text comes here...",
        "headline": "some text comes here...",
        "question": "some text comes here...?",
        "options": ['<25%', '25-50%', '51-75%', '>75%'],
        "notes": "some text comes here..."
    },
    {
        "id": 2,
        "type": "question-flipping-card",
        "section": "some text comes here...",
        "headline": "some text comes here...",
        "options": ['<25%', '25-50%', '51-75%', '>75%']
    }
]

Answer 1

如果您知道json的長度，則可以使用let而不是var 。 let將為塊范圍的異步操作保留i 。 如果使用var ，那么i將是所有異步操作的最后一個值：

appendContent(){
  this.retrieveDataService.fetchData().subscribe(data=>{
        for (let i = 0; i < data.length; i++) {
            if (data[i].type == "question-card") {
                this.questioncard = data[i];
                this.questionscard.push(this.questioncard);
            }
        } 
   });  

 }

}

HTML：

<div class="container" *ngFor="let q of questionscard">
   <h3>{{q?.section}}</h3>
</div>

Answer 2

更新

首先，您實際上多次致電服務。 map和subscribe已經通過響應數據進行迭代，您不需要for循環。

其次，在您可以進行Array突變（ Array.push或shift ）之后，Angular不會更新HTML。

1. 像這樣設置新值

   this.questions = [...this.questions, this.question]

2. 或使用可觀察模式

嘗試這個

  appendContent() {
    this.retrieveDataService.fetchData() 
      .filter((item) => item.type === 'question-card') 
      .subscribe(data => {
        this.questions = [...this.questions, data]
      });
  }

在這里閱讀更多示例

---

原始答案

在您的json文件中。

{
 // .. 
 "options": ['<25%', '25-50%', '51-75%', '>75%'],
}

單引號'是無效的JSON格式

將'替換為"

---

來自www.json.org

值可以是帶雙引號的字符串，也可以是數字，也可以是true或false或null，或者是對象或數組。 這些結構可以嵌套。