Angular 2 and PHP

Question

Hello, I’m beginner in angular 2, I’m developing an application using Angular 2 and PHP, but when having picked up the values of json gives error:

ERROR Error: Error trying to diff 'Grand Turismo'. Only arrays and iterables are allowed and ERROR CONTEXT DebugContext_{view: Object, nodeIndex: 23, nodeDef: Object, elDef: Object, elView: Object}.

This is the back-end, it’s pretty simple:

<?php

    use \Psr\Http\Message\ServerRequestInterface as Request;

    use \Psr\Http\Message\ResponseInterface as Response;

    header("Access-Control-Allow-Origin: *");

    require 'vendor/autoload.php';

    $app = new \Slim\App;

    $app->get('/games', function (Request $request, Response $response){

        $games = array();

        $games = array(

            "name" => "Grand Turismo",

            "category" => "PS4",

            "price" => "199.99",

            "quantity" => "8",

            "production" => "true",

            "description" => "Eleito o melhor jogo de corrida."

        );

        return json_encode($games);

    });

    $app->run();
?>

app.modulets.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { PopupModule } from 'ng2-opd-popup';

import { AppComponent } from './app.component';

import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { GamesListingComponent } from './listing/games/games-listing.component';
import { PlatformsListingComponent } from './listing/platforms/platforms-listing.component';
import { routing } from './app.routes';

import 'rxjs/add/operator/map';

@NgModule({
  declarations: [
    AppComponent, 
    PlatformsListingComponent, 
    FooterComponent,
    HeaderComponent,
    GamesListingComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    HttpModule,
    PopupModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

games-Listing.component.ts

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

import {Popup} from 'ng2-opd-popup';

@Component({
    moduleId: module.id,
    selector: 'app-games-listing',
    templateUrl: './games-listing.component.html',
    styleUrls: ['./games-listing.component.css']
})
export class GamesListingComponent{ 

    games: Object[] = [];

    constructor(http: Http, private popup:Popup){

        http.get('http://localhost:80/lightning/server/index.php/games')
        .map(res => res.json()).subscribe(games => {

            this.games = games;

            console.log(this.games);

        }), erro => console.log(erro);

    }

    ClickButton(){

        this.popup.options = {

            header: "Your custom header",

            color: "#5cb85c", // red, blue....

            widthProsentage: 40, // The with of the popou measured by browser width

            animationDuration: 1, // in seconds, 0 = no animation

            showButtons: true, // You can hide this in case you want to use custom buttons

            confirmBtnContent: "OK", // The text on your confirm button

            cancleBtnContent: "Cancel", // the text on your cancel button

            confirmBtnClass: "btn btn-default", // your class for styling the confirm button

            cancleBtnClass: "btn btn-default", // you class for styling the cancel button

            animation: "fadeInDown" // 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'bounceIn','bounceInDown'

        };

        this.popup.show(this.popup.options);

    }

    YourConfirmEvent(){

        alert('You cliked confirm');

    }

    YourCancelEvent(){

        alert('You cliked cancel');

    }

}

games-Listing.component.html

<table class="table table-striped">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Categoria</th>
      <th>Fabricante</th>
      <th>Ver mais...</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let game of games">
      <td>{{game.name}}</td>
      <td></td>
    </tr>
  </tbody>
</table>

If you need any other code, just let me know.

Thank you in advance.

Answer 1

The message informs you that you are iterating on something that is not eternal. Your error is here:

$games = array();

$games = array(

    "name" => "Grand Turismo",

    "category" => "PS4",

    "price" => "199.99",

    "quantity" => "8",

    "production" => "true",

    "description" => "Eleito o melhor jogo de corrida."

);

return json_encode($games);

See that you state in your backend, a variable called $games and soon after you redeclare it as an array with values and that would be a objeto of his collection games.

You should be making an associative array and not redeclareting it. So the correct one would be:

$games[] = [

    "name" => "Grand Turismo",

    "category" => "PS4",

    "price" => "199.99",

    "quantity" => "8",

    "production" => "true",

    "description" => "Eleito o melhor jogo de corrida."
];