How do I access individual components of json response - Angular

Question

I have a controller that returns a json array with one index in it - a json string containing three different properties - whiteLedvalue - blueLedValue - variousColorLedValue.

In my controller I have something like this:

function getLedData()
{
  ledService.getLedData()
  .then(function(response){
    ctrl.ledData = response.data;
  });
}

And in my dashboard HTML file I have this:

  `<tr ng-repeat="led in ctrl.ledData">
    <td> LED Value</td>
    <td >
        {{ led }}
    </td>
  </tr>`

I would like to access just the white values and place them in a td and then the blue in another td etc....

I tried this:

`<tr ng-repeat="led in ctrl.ledData.whiteLedValue">
    <td> LED Value</td>
    <td >
        {{ led }}
    </td>
 </tr>`

And it did not work. I assume it has something to do wiht the fact that I am returning an array and I need to access the correct index. But I cannot seem to figure out if I'm supposed to set the white/blue/various values to their own ctrl.whatever or I should try to access them within the html. Any help on getting these individual fields would be great. The only way I can get it to work is by returning the entire json string.

Answer 1

Did you parse the json-string to a javascript array yet?

ctrl.ledData = JOSN.parse(response.data);

Further reading: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse