Alex Alex - 5 days ago 5
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;

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

$scope.jsonData = response;
console.log($scope.jsonData);

});


};
});


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">
<table>
<tr ng-repeat="x in jsonData">
<td>{{ x.costo_m }}</td>
<td>{{ x.desc }}</td>
<td>{{ x.id }}</td>
</tr>




This is printed on console

Object
data:Array[1]
0: Array[1]
0: Object
costo_m: 18.973529411765
desc: "BLONG-F25+MOBICTRL"
id: "choice1"
licencias: 4.3

Answer

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 = response.data;