Итерировать по json с помощью angular 7 с использованием сервисов

Question

У меня есть сервер узлов, который возвращает следующий JSON:

{
        "ResponseStatus": {
          "ResponseCode": 0,
          "ResponseMessage": "Success."
        },
        "Events": [
          {
            "CodEspec": 65957,
            "NomeEspec": "O PIOR ESPETÁCULO DO MUNDO",
            "DiaHoraEspecs": [
              "2019-05-09T21:30:00",
              "2019-05-10T21:30:00",
              "2019-05-25T21:30:00"
            ]
          },
          {
            "CodEspec": 01234,
            "NomeEspec": "O MELHOR ESPETÁCULO DO MUNDO",
            "DiaHoraEspecs": [
              "2019-05-09T21:30:00",
              "2019-05-10T21:30:00",
              "2019-05-25T21:30:00"
            ]
          },

        ]
      }

Я создал угловой сервис, который выполняет GET и возвращает JSON.

tickeline.service.ts

getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions);
  }

Также создана модель для события, чтобы получать только определенные параметры:

events.ts

export class Event{

  CodEspec: number;
  NomeEspec: string;
  DiaHoraEspecs: Date[];

}

В компоненте событий, в котором я хочу показать JSON, я вызываю функцию geteventos из службы.

events.component.ts

export class EventsComponent implements OnInit {

  events: Event[];

  constructor(private ticketlineservice: TicketlineService) { }

  ngOnInit() {
    this.ticketlineservice.getEventos().subscribe(events => {
      this.events = events;
    });
  }
}

events.component.html

<div class="text-center">
    <ul *ngFor="let event of events">
        <li class="btn bg-primary text-center">
            <h2>Evento:</h2> 
            <p>{{ event.NomeEspec }}</p>
            <p>{{ event.CodEspec }}</p>
            <p>{{ event.DiaHoraEspecs }}</p>
        </li>
    </ul>
</div>

Задача: Создать для каждого объекта Event элемент li с соответствующей информацией.На данный момент он создает только элемент li и не отображает информацию JSON

Answer 1

В этом json, который вы представляете Events это свойство. Таким образом, вы должны получить это свойство от events в subscribe:

this.ticketlineservice.getEventos().subscribe(events => {
  this.events = events.Events;
});

Но если вы получаете массив в качестве ответа со свойством Events внутри (как вы упомянули об этом в комментарии), вы должны сделать это так:

this.ticketlineservice.getEventos().subscribe(events => {
  this.events = events[0].Events;
});

И вы также должны в дальнейших шагах изменить тип возврата getEventos():Observable<Event[]>, потому что, как вы показали, это не так (согласно этому примеру ответа JSON). Вы не возвращаете массив Event.

А также в HTML-файле вы должны внести изменения, такие как @Dusan Radovanovic post в качестве ответа. Так и должно быть так:

<div class="text-center">
  <ul>
    <li class="btn bg-primary text-center" *ngFor="let event of events">
      <h2>Evento:</h2> 
      <p>{{ event.NomeEspec }}</p>
      <p>{{ event.CodEspec }}</p>
      <p>{{ event.DiaHoraEspecs }}</p>
    </li>
  </ul>
</div>

Answer 2

Вместо итерации по ul элементам вы должны итерировать по li элементам

 <div class="text-center">
        <ul>
            <li class="btn bg-primary text-center" *ngFor="let event of events">
                <h2>Evento:</h2> 
                <p>{{ event.NomeEspec }}</p>
                <p>{{ event.CodEspec }}</p>
                <p>{{ event.DiaHoraEspecs }}</p>
            </li>
        </ul>
    </div>

Answer 3

Здесь есть две части вашей проблемы.

Из ответа выберите массив Events и назначьте его переменной уровня класса событий в event.component.ts

export class EventsComponent implements OnInit {

  events: Event[];

  constructor(private ticketlineservice: TicketlineService) { }

  ngOnInit() {
    this.ticketlineservice.getEventos().subscribe(events => {
      this.events = events.Events;// This is the change for getting only events from the response
    });
  }
}

Таким образом, у вас будет только массив событий, а не весь ответ.

Второй шаг заключается в том, чтобы, как указано ниже, запустить основной цикл в li, а не в ul, как показано ниже:

<div class="text-center">
        <ul>
            <li class="btn bg-primary text-center" *ngFor="let event of events">
                <h2>Evento:</h2> 
                <p>{{ event.NomeEspec }}</p>
                <p>{{ event.CodEspec }}</p>
                <p>{{ event.DiaHoraEspecs }}</p>
            </li>
        </ul>
    </div>

Я хотел бы добавить еще одну полезную практику, которая заключается в добавлении оператора elvis или безопасного оператора, чтобы ваш HTML не переставал работать.

event.NomeEspec ---> event? .NomeEspec

Таким образом, если событие не определено , мы можем безопасно получить доступ к свойствам объекта события.

Обновление

getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions);
  }

здесь вы набираете тип ответа на Event [], который вам придется немного изменить, как показано ниже.

**getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions).map(response=> response.Events);// map operstor takes your response and sends the Events array as a part of the response for your HTTP call.
  }**

Answer 4

Ваш JSON не массив, это объект.

Внутри вашей подписки, я думаю, вы, вероятно, захотите сделать это:

  this.events = events.Events;

Как уже упоминали другие, с вашим текущим кодом вы должны создать два ul списка.Если вы хотите создать один список из двух элементов, вам понадобится что-то вроде этого:

<ul >
    <li class="btn bg-primary text-center" *ngFor="let event of events">
        <h2>Evento:</h2> 
        <p>{{ event.NomeEspec }}</p>
        <p>{{ event.CodEspec }}</p>
        <p>{{ event.DiaHoraEspecs }}</p>
    </li>
</ul>

Перемещение *ngFor из ul в li