Member Avatar for davy_yg

Hello,

I am trying to follow the following tutorials:

https://www.w3schools.com/angular/angular_tables.asp

 <div ng-app="myApp" ng-controller="customersCtrl">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

It produces a customer table. I wonder what is in customers.php to produces table like that? Since they do not show it in the tutorial.

  • 6 Contributors
  • 6 Replies
  • 305 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jstfsklh211

Dani AI

Generated

Short answer: customers.php is just an HTTP endpoint that returns JSON (the AngularJS controller then assigns that JSON to a scope variable). It can be a tiny PHP script that prints a JSON array, a script that queries a database and json_encodes the rows, or simply a static JSON file you fetch with $http. As pointed out, the returned structure must match what your Angular code expects; shows what a sample response looks like. The three practical requirements are: valid JSON, matching property names, and the correct HTTP headers.

A minimal PHP example that returns JSON (hardcoded data) looks like this:

<?php
header('Content-Type: application/json; charset=utf-8');

$rows = [
  ["Name" => "Example Corp", "Country" => "USA"],
  ["Name" => "Foo Bar Ltd", "Country" => "UK"]
];

echo json_encode(["records" => $rows]);

A database-driven version simply fetches rows and json_encodes them (use PDO, prepared statements, and proper error handling in real code):

<?php
header('Content-Type: application/json; charset=utf-8');

$pdo = new PDO('mysql:host=localhost;dbname=mydb;charset=utf8', 'user', 'pass', [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);

$stmt = $pdo->query('SELECT name AS Name, country AS Country FROM customers');
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode(['records' => $rows]);

Troubleshooting and quick tips: use the browser DevTools Network tab to inspect the customers.php response (status code, response body and Content-Type). If the request is blocked by CORS, add the appropriate Access-Control-Allow-Origin header for testing (but tighten it for production). Validate the JSON (JSON lint) if Angular doesn’t see the data. If you only need static data for testing, you can bypass a server by assigning an array directly in the controller. For posting code in this thread, the curly-brace error mentioned by is the forum parser — use the code button or fenced code blocks as suggested. ’s advice to check the console is exactly the right first step when things don’t appear.

Recommended Answers

All 6 Replies

Member Avatar for s3xandch0c0late

Most probably it contains the API that returns the data in the form of an array with Customer Name and Country. This data might be hardcoded in the file, or it is requesting from a table somewhere.

Member Avatar for davy_yg

What the API file could be look like? Any example ? (an API file that's readable to produce a table consist of name and country.

Since I have a create a table using angular (the data in the table is provided), I only see the result. So I wonder what's the best way to input the data? If not through API is there some other methods to do it?

Edited by davy_yg
Member Avatar for Member #1144041

I have a solution but when I post solution, getting following error.
Curly braces { } may only be used when posting code.

Member Avatar for JamesCherrill

click the box labelled </>Code above the editor window to open a frame into which you can post code and retain its formatting.

Member Avatar for xrjf

Type in Google:

w3schools customers.php
The first link appeared to have:

{ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"}, {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] }
Member Avatar for jstfsklh211

use your console to view the response for customers.php

Edited by jstfsklh211
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.