Ionic AngularJS сложное извлечение данных json

Я новичок в Ionic и пытаюсь передать сложные данные Json в свой html (где Ionic пригодится).

Под «сложными» данными Json я подразумеваю такие Jsons:

{
  "Key: "
     [
      {
       "Key: " "Value",
       "Key: " "Value"
      },
      {
       "Key: " "Value",
       "Key: " "Value"
      }
     ]
}

Проблема здесь для меня - это первый ключ. Я видел несколько примеров для форматов Json без этого первого ключа, Примеры: https://thewikihow.com/video_imaTBx4jbwY

Что у меня есть сейчас:

Мой .ts файл:

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

import{HttpClient} from "@angular/common/http";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  BugList: Object;

  constructor(public http: HttpClient){
    this.http.get('jsonurl').pipe()
    .subscribe(res => this.BugList = res;), 
    (err) => {
      alert("failed loading data");
    });
  }
}

и для моего html:

<ion-content>
  <ion-card *ngFor = "let bug of BugList| async">
    <ion-card-header>
      <ion-card-subtitle>{{bug.Bugs[1].Title}}</ion-card-subtitle>
      <ion-card-title></ion-card-title>
    </ion-card-header>
  </ion-card>
</ion-content>

это дает мне следующую ошибку:

ОШИБКА Ошибка: InvalidPipeArgument: '[object Object]' для канала 'AsyncPipe' Это означает, что я могу использовать аргумент *ngFor только для массивов, а не для сложных объектов Json, верно?

Я также видел другой пример: https://thewikihow.com/video_TD1rKSuC3Zk

он пробовал следующим образом:

this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
  this.users = res.results;
}, (err) => {
  alert("failed loading json data");
});
}

этот привел меня в том направлении, в котором я сейчас. Я заменил функцию .карта на .трубка в моем файле .ts, потому что .map устарел. Теперь у меня есть ошибка, которая говорит Свойство «Результаты» не существует для типа «Объект»

Главный вопрос: Я действительно борюсь с этим дополнительным ключом, без него было бы не так сложно. есть ли способ сделать это динамичный, используя показанные методы?

Можете ли вы показать нам реальный пример данных JSON, а не просто мокап? Как выглядит список ошибок?

Pop-A-Stash 06.03.2019 17:39

Извините, но данные не должны иметь отношения к вопросу. Расположение данных такое. Вы должны понять это, если вы знакомы с этим. Не могу показать из соображений конфиденциальности. Если это поможет, второе видео показывает именно расположение моих данных.

gowiththestackflow 07.03.2019 09:02
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...
Разница между Angular и React
Разница между Angular и React
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...
0
2
26
0

Другие вопросы по теме