Как переписать этот PHP-код на Angular?

Question

[prrrrrrr]

Есть такой код, но его нужно написать на ангуляре, как это сделать?

<?php
$jsonOrders = file_get_contents('https://site.com/orders.json');
$orders = json_decode($jsonOrders);

foreach($orders as $order) : ?>

        <tr>
            <td><?php echo $order->id; ?></td>
            <td><?php echo $order->date; ?></td>
        </tr>
    
<?php endforeach;?>

Answer 1

[the5x]

Только тип для interface надо сделать, как у вас. Поля будут (id, date) вместо моих в интерфейсе:

service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Todo } from './app.interface';

@Injectable()
export class AppService {
    constructor(private httpClient: HttpClient) {}
    
    fetchDataApi(url) {
        return this.httpClient.get<Todo>(url)
    }
}

component:

import { Component } from '@angular/core';
import { AppService } from './app.service';
import { Todo } from './app.interface';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public users: Todo;

  constructor(private httpService: AppService) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    const API_URL = 'https://jsonplaceholder.typicode.com/todos/';
    
    this.httpService.fetchDataApi(API_URL)
      .subscribe(data => {
        this.users = data
      })
  }
}

interface:

export interface Todo {
    userId: number,
    id: number,
    title: string,
    completed: boolean,
}

Answer 2

[Andrew]

Очень странная постановка вопроса, но попробую тыкнуть.
в $orders у вас лежит массив с обьектами?
Получите их каким-то способом(ngrx и т.п.)

orders = [
{id:1,date:"22.02.2020"},
{id:2,date:"22.03.2020"},
{id:3,date:"22.04.2020"}
]

<tr *ngFor="let order of orders">
<td>{{order.id}}</td>
<td>{{order.date}}</td>
</tr>

Comments

[prrrrrrr]

в $orders лежит:

[
	{
		"id": 1000,
		"date": "2020-07-22 18:57:51",
	},
	{
		"id": 1001,
		"date": "2020-04-19 03:39:30",
	},
// и таких к примеру 100 объектов

[Andrew]

prrrrrrr, значит мой код работает, если нет то замените

{{order.id}}
//На
{{order["id"]}}

Answer 3

[Антон]

Если вы с ангуляром не работали никогда, то простого ответа, который можно будет скопипастить в ваш проект, на ваш вопрос нет.
Если с английским норм - советую начать с официального туториала https://angular.io/tutorial там разбирается и как вывести данные на страничку и как их получить с сервера.