Alex Alex - 1 year ago 71
HTML Question

Display json into html table with angular

I'm having problems deploying a json reponse on a table,
This is my controller.js

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope, $http) {

$scope.choices = [{id: 'choice1'}];
$scope.jsonData = {};

This is the function inside my controler.js where I post data and my php response with my table content

$scope.continue = function(choices)
var json = $scope.choices;

$'php/calculador.php', json)
.then(function(response) {

$scope.jsonData = response;



I printed the json data in console to be sure the data is correct, and it is, but it does not display any data in my html table

this is my HTML table
Where I'm trying to deploy my json

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<tr ng-repeat="x in jsonData">
<td>{{ x.costo_m }}</td>
<td>{{ x.desc }}</td>
<td>{{ }}</td>

This is printed on console

0: Array[1]
0: Object
costo_m: 18.973529411765
id: "choice1"
licencias: 4.3

Answer Source

Your jsonData is not an array, it's an object which seems to have a single property data, which then contains an array.

So, just replace $scope.jsonData = response; with $scope.jsonData =;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download