Разбор элементов JSON с использованием Angular

Question

У меня есть объект JSON, и я хочу присвоить значения свойств 4 моим переменным, используя Angular, а именно:

authorText : string;
titleText : string;
durationText : string;
genreText : string;

А вот JSON:

"{"n":{  
   "_id":1101,
   "labels":[  
      "Song"
   ],
   "properties":{  
      "duration":"214000",
      "author":"Shawn Mendes",
      "genre":"pop",
      "title":"In My Blood"
   }
}
}"

Я пытался использовать это и подобные ему решения:

Object.keys(editData).forEach(function (key) {
  console.log(key);
  if(key === "author"){
     this.authorText = editData[key];
  }
  console.log( key , editData[key] );
});

Но ключ всегда равен 0 по некоторым причинам.

РЕДАКТИРОВАТЬ Добавлено изображение JSON: строка, которую я напечатал ранее, была сделана следующим образом: сохранение ее как глобальной переменной с последующим использованием JSON.stringify(temp1);.

Answer 1

Вы можете использовать это:

const { duration, author, genre, title } = this.editData[0].n.properties;
this.song = {
    authorText: author,
    titleText: title,
    durationText: duration,
    genreText: genre
};

Здесь мы destructuring свойства от клавиши properties и просто присваиваем их песням Ключи объекта одну за другой.

---

Лучше всего сделать , просто назвать поля как duration, author, genre и title.Тогда вы можете просто сделать что-то вроде этого:

export interface Song {
  author: string;
  title: string;
  duration: string;
  genre: string;
}

И в вашей функции:

this.song = { ...editData[0].n.properties };

Здесь мы используем оператор распространения (...) для распространения свойствключи объекта и назначьте их свойству song в классе компонентов.

---

Вот пример StackBlitz для вашей ссылки.

Answer 2

Вы можете просто сделать это:

this.song = this.editData.n.properties;

У меня есть стек, который демонстрирует это здесь: https://stackblitz.com/edit/angular-udmdqr

Основной код здесь:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{song.author}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  song: Song;
  editData = {
    "n": {
      "_id": 1101,
      "labels": [
        "Song"
      ],
      "properties": {
        "duration": "214000",
        "author": "Shawn Mendes",
        "genre": "pop",
        "title": "In My Blood"
      }
    }
  }

  constructor() {
    this.song = this.editData.n.properties;
  }
}

export interface Song {
  duration: string;
  author: string;
  genre: string;
  title: string
}