javascript - Hur man filtrerar JSON-data i Angular 4

Jag försöker fylla sidan med data, men den visas inte på sidan. Istället visar den ett felmeddelande:

core.es5.js:1020 FEL SyntaxError: Oväntat tecken ' i JSON vid 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()
      )
  }
}

Page-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%']
    }
]

Svar #1

Om du känner till längden på din json kan du använda let istället för var. let kommer att bevara i för den blockomfattade asynkrona operationen. Om du använder var kommer i att vara det sista värdet för alla dina asynkrona operationer:

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>

Svar #2

uppdaterad

först och främst, du kallar faktiskt tjänsten många gånger. map och subscribe itererar redan genom svarsdatan, du behöver inte den for-loopen.

för det andra kommer Angular inte att uppdatera HTML efter en Array-mutation (Array.push eller shift) du kan antingen..

1. sätt nytt värde så här

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

2. eller använd Observable-mönster

prova detta

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

läs mer exempel här

ursprungligt svar

i din json-fil.

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

enkel citationstecken ' är inte giltigt JSON-format

ersätt ' med "

från www.json.org

Ett värde kan vara en sträng inom dubbla citattecken, eller ett tal, eller sant eller falskt eller null, eller ett objekt eller en array. Dessa strukturer kan vara inbäddade.