xxxxxxxxxxxxx xxxxxxxxxxxxx - 2 months ago 7
AngularJS Question

JSON won't fetch in angular

edit: I've updated the code with the latest changes you guys proposed.

I have this data.json:

[{
"codigo": 21420,
"desc": "itv orion 20 a",
"prod_24_h_kg": 22
}, {
"codigo": 21421,
"desc": "itv orion 20 w",
"prod_24_h_kg": 24
}, {
"codigo": 21430,
"desc": "itv orion 30 a",
"prod_24_h_kg": 31
}, {
"codigo": 21431,
"desc": "itv orion 30 w",
"prod_24_h_kg": 34
}, {
"codigo": 21440,
"desc": "itv orion 40 a",
"prod_24_h_kg": 40
}, {
"codigo": 21441,
"desc": "itv orion 40 w",
"prod_24_h_kg": 42
}, {
"codigo": 21460,
"desc": "itv orion 60 a",
"prod_24_h_kg": 54
}, {
"codigo": 21461,
"desc": "itv orion 60 w",
"prod_24_h_kg": 56
}, {
"codigo": 21480,
"desc": "itv orion 80 a",
"prod_24_h_kg": 77
}, {
"codigo": 21481,
"desc": "itv orion 80 w",
"prod_24_h_kg": 79
}, {
"codigo": 21490,
"desc": "itv orion 130 a",
"prod_24_h_kg": 130
}]


In app.js I have this:

$scope.people = [];
$scope.loadData = function() {
alert("2");
$http.get('data.json').then(function(data) {
alert("succ");
console.log(data)
$scope.people = data.maq;
});
};


Also, this is the HTML:

<div>
<p> Click <a ng-click="loadData()">here</a> to load data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.codigo}}</td>
<td>{{person.desc}}</td>
<td>{{person.prod_24_h_kg}}</td>
</tr>
</table>
</div>


So, when I click I do get the alert from the function, however the data won't load; I get no errors either.

I'm not sure what I'm missing. I thought it wa a cross origin problem, but the json is on the same domain and I don't get the error. I'm running a local server with XAMPP.

Answer

<table ng-if="people">

And based on your last print there's a data inside your object so it should be:
$scope.people = data.data.maq;