如何过滤 Angular 4 中的 JSON 数据

Question

我正在尝试在页面上填充数据，但是它没有在页面上呈现。相反，它会抛出一个错误消息：

core.es5.js:1020 ERROR SyntaxError: Unexpected token ' in JSON at position 322

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

question-card.component.html

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

retrieve-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()
      )
  }
}

页面内容.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 循环。

其次，Angular 不会在 Array 突变（Array.push 或 shift）后更新 HTML，你也可以..

1. 像这样设置新值

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

2. 或使用Observable 模式

试试这个

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

阅读更多sample here

---

原答案

在您的 json 文件中。

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

单引号 ' 不是有效的 JSON 格式

将' 替换为"

---

来自www.json.org

值可以是双引号中的字符串、数字、true 或 false 或 null、对象或数组。这些结构可以嵌套。