将 JSON 数据检索到 class 数组中

Question

我正在尝试从下面的文件中检索数据，return 具有 json 值的 class 对象并将其推入上面的 class 数组将其显示为硬编码 json 数据，当前错误是无法将 Exercise[] 分配给 Exercise。我是编码新手，非常感谢能伸出援手的人。

export class ExerciseService {
  exercises: Exercise[] = []
  completedEx: Exercise[] = []
  errorMessage: string;

  constructor(private http: HttpClient) {
    // this.exercises = [
    //    new Exercise('pull-ups', 3, 5, '1/1/2020', '13:00', 'assets/pullups.jpg', 'pull-ups'),
    //    new Exercise('push-ups', 3, 20, '2/2/2020', '14:00', 'assets/pushups.jpg', 'push-ups'),
    //    new Exercise('sit-ups', 3, 30, '3/3/2020', '15:00', 'assets/situps.jpg', 'sit-ups')
    // ]
     this.getExerciseData().subscribe(data=> this.exercises.push(data))
  }

  getExercises(): Exercise[] {
    return this.exercises;
  }


  getExerciseData(){
    return this.http.get("/assets/data/exerciseData.json").pipe
    (map(response => Object.keys(response["exercises"]).map(function(key, index){
      let row = response["exercises"][key]
      return new Exercise(key, row["sets"], row["reps"], row["date"], row["time"], row["image"], key)
    })))
  }


//json file
{
    "exercises": {
        "Pull-ups": {
            "name": "Pull-ups",
            "sets": 3,
            "reps": 6,
            "date": "2/2/2020",
            "time": "16:00",
            "image": "assets/pullups.jpg",
            "id": "Pull-ups"
        },
        "Push-ups": {
            "name": "Push-ups",
            "sets": 3,
            "reps": 20,
            "date": "10/2/2020",
            "time": "14:00",
            "image": "assets/pushups.jpg",
            "id": "Push-ups"
        },
        "Sit-ups": {
            "name": "Sit-ups",
            "sets": 5,
            "reps": 30,
            "date": "12/2/2020",
            "time": "13:00",
            "image": "assets/situps.jpg",
            "id": "Sit-ups"
        }
    }
}


//exercise class
export class Exercise {

    name: string
    reps: number
    sets: number
    date: string
    time: string
    image: string
    id: string

    constructor(name: string, sets: number, reps: number, date: string, time: string, image: string, id?: string) {
        this.name = name
        this.sets = sets
        this.reps = reps
        this.date = date
        this.time = time
        this.image = image
        this.id = id
    }
}

Answer 1

将您的构造函数代码更改为：-

 constructor(private http: HttpClient) {
     this.getExerciseData().subscribe(data=> {
        this.exercises = [...this.exercises, ...data]);
     });
  }

将您的 getExcercise 方法更改为：-

getExerciseData(){
    return this.http.get("/assets/data/exerciseData.json").pipe
    (map(response => Object.keys(response["exercises"]).map((key, index) =>{
      let row = response["exercises"][key]
      return new Exercise(key, row["sets"], row["reps"], row["date"], row["time"], row["image"], key)
    })))
  }

将 JSON 数据检索到 class 数组中

Retrieve JSON data into class array

json

http

ionic-framework

angular

angular8