P
P
prrrrrrr2020-05-22 11:53:34
Angular
prrrrrrr, 2020-05-22 11:53:34

How to rewrite this PHP code in Angular?

There is such a code, but it needs to be written in Angular, how to do it?

<?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 the question

In order to leave comments, you need to log in

3 answer(s)
T
the5x, 2020-05-22
@prrrrrrr

Only the type for interface needs to be done, as you have. The fields will be (id, date) instead of mine in the interface:
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,
}

A
Andrew, 2020-05-22
@KickeRockK

Very strange statement of a question, but I will try to poke.
in $orders you have an array with objects?
Get them somehow (ngrx, etc.)

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>

A
Anton, 2020-05-22
@sHinE

If you have never worked with Angular, then there is no simple answer that you can copy-paste into your project.
If with English norms, I advise you to start with the official tutorial https://angular.io/tutorial , it understands how to display data on the page and how to get it from the server.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question