JSON won't fetch in angular

Question

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.

You can add line console.log("data") inside callback function. This way you would see in console what is actually being loaded. — Krzysztof Atłasik
– Krzysztof Atłasik, Commented Sep 13, 2016 at 8:50
it's not part of your issue but you should replace .success (deprecated) to .then — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Sep 13, 2016 at 8:59

taguenizy · Accepted Answer · 2016-09-13 09:33:30Z

2

<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;

edited Sep 13, 2016 at 9:33

answered Sep 13, 2016 at 9:23

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

1x2x3x4x Over a year ago

data.data did the trick, I thank you very much for seeing it and helpig me out. I'll mark this as the correct answer. Thanks to everyone else as well. I'll update the code ASAP. Didn't add the maq, though.

ItayB · Accepted Answer · 2016-09-13 08:50:07Z

1

Your JSON is invalid. line 101 "codigo": 21441, might start with { ? verify with some online json validor http://jsonlint.com/

answered Sep 13, 2016 at 8:50

ItayB

11.5k11 gold badges61 silver badges94 bronze badges

1 Comment

1x2x3x4x Over a year ago

Thank you for your answer. The JSON is valid, I just cut it down short and made a mistake. I validated it on jsonlint.com.

Collectives™ on Stack Overflow

JSON won't fetch in angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related