Отображение объектов внутри JSON Объект в Angular - PullRequest
Новая
       10

Отображение объектов внутри JSON Объект в Angular

0 голосов
/ 17 апреля 2020

У меня есть JSON база данных, в которой есть несколько вложенных объектов: 

{
"characters2": [
    {
      "campaign":"Menagerie Coast",
      "index": 1,
      "name": "Mark Whithershmitz",
      "portrait": "assets/pics/markW.jpg",
      "affiliation": "Kryn Dynasty",
      "class": "Wizard - Bladesinger",
      "list1": {"Swords":[
        "McClane: Moon-Glow Scimitar",
        "Carver: Shadow Sword"
      ]},
      "list2": {"Remarks about his Race":"5"},
      "title1a":"Sword Count",
      "title1b": "2",
      "title1c": "fa fa-robot",
      "title2a":"Kills",
      "title2b": "0",
      "title2c": "fas fa-skull-crossbones",
      "title3a":"Magic Sword",
      "title3b": "None",
      "title3c": "fas fa-dumpster-fire"
    },
    {
      "campaign":"Menagerie Coast",
      "index": 2,
      "name": "The Hermit II",
      "portrait": "assets/pics/theHermit2.jpg",
      "affiliation": "None?",
      "class": "Rogue/Mastermind",
      "list1": {"Bag of Animal Cotton?": [
        "Lion x 2",
        "Goat"
      ]},
      "list2": [],
      "title1a":"Bar Fights",
      "title1b": "0",
      "title1c": "fas fa-beer",
      "title2a":"Kills",
      "title2b": "0",
      "title2c": "fas fa-skull-crossbones",
      "title3a":"Badassery",
      "title3b": "Medium",
      "title3c": "far fa-laugh-beam"

    }]}

Я обращаюсь к базе данных, подписавшись на наблюдаемое: 

import { Component, OnInit } from '@angular/core';
import { DndDatabaseService } from 'src/app/dnd-database.service';

@Component({
  selector: 'app-player-card',
  templateUrl: './player-card.component.html',
  styleUrls: ['./player-card.component.scss']
})
export class PlayerCardComponent implements OnInit {
  characters;
  characters2;
  isDataAvailable:boolean = false;


  constructor(private dndDatabaseService: DndDatabaseService) { }

  ngOnInit() {

   this.dndDatabaseService.getCharacters().subscribe(characters => {this.characters = characters as playerData[]})
   this.dndDatabaseService.getCharacters2().subscribe(characters2 => {(this.characters2 = characters2 as playerData[])}) 
   this.isDataAvailable = true;

  }

export class playerData {
  name: string;
  potrait: string;
  affiliation:string;
  class: string;
  list1: object;
  list2: object;
  campaign: string;
  index: number;
  title1a:string;
  title1b: string;
  title2a:string;
  title2b: string;
  title3a:string;
  title3b: string;
}

База данных Сервис - это простой вызов http.get, который возвращает json.

. Я создаю HTML объекты, используя * ngFor, который работает для всего, кроме объектов list1 и list2. 

<div *ngFor character in characters2 >
        <h1>{{character.name}}</h1> 

        <p>{{(character.list1}}</p>
        <p>({{character.list2}})</p>
</div>

Выходные данные для list1 и 2 с этим кодом - просто [object Object]. Я не могу использовать ключ, который находится внутри объекта (например, character.list1.Swords), потому что я хочу иметь возможность иметь разные объекты в списках list1 и list2 для разных символов.

Каков наилучший способ получить эту информацию для отображения? Я мог бы написать новую наблюдаемую, но я уверен, что это не самый лучший способ. Я пробовал использовать трубу json, но она отображает JSON с фигурными скобками. Я мог бы, вероятно, css убрать это, но это тоже не лучшее решение.

Я уверен, что есть что-то, что я могу сделать либо в подписке на наблюдаемое, либо в HTML, но я не смог ничего найти.

1 Ответ

1 голос
/ 17 апреля 2020

Пожалуйста, попробуйте вот так. В шаблоне вы можете указать значение трубы. используя этот канал, вы можете получить доступ к ключу и значению объектов item1 и item2. 

characters2 = {
    characters2: [
      {
        campaign: "Menagerie Coast",
        index: 1,
        name: "Mark Whithershmitz",
        portrait: "assets/pics/markW.jpg",
        affiliation: "Kryn Dynasty",
        class: "Wizard - Bladesinger",
        list1: {
          Swords: ["McClane: Moon-Glow Scimitar", "Carver: Shadow Sword"]
        },
        list2: { "Remarks about his Race": "5" },
        title1a: "Sword Count",
        title1b: "2",
        title1c: "fa fa-robot",
        title2a: "Kills",
        title2b: "0",
        title2c: "fas fa-skull-crossbones",
        title3a: "Magic Sword",
        title3b: "None",
        title3c: "fas fa-dumpster-fire"
      },
      {
        campaign: "Menagerie Coast",
        index: 2,
        name: "The Hermit II",
        portrait: "assets/pics/theHermit2.jpg",
        affiliation: "None?",
        class: "Rogue/Mastermind",
        list1: { "Bag of Animal Cotton?": ["Lion x 2", "Goat"] },
        list2: [],
        title1a: "Bar Fights",
        title1b: "0",
        title1c: "fas fa-beer",
        title2a: "Kills",
        title2b: "0",
        title2c: "fas fa-skull-crossbones",
        title3a: "Badassery",
        title3b: "Medium",
        title3c: "far fa-laugh-beam"
      }
    ]
  };

<div *ngFor="let character of characters2.characters2">
    <h1>{{character.name}}</h1>
    <div *ngFor="let item of character.list1 |keyvalue">
        <span>{{item.key}}</span> : <span>{{item.value}}</span>
    </div>

    <div *ngFor="let item of character.list2 |keyvalue">
            <span>{{item.key}}</span> : <span>{{item.value}}</span>
    </div>
</div>
...