display json array data on page angular

Question

I have a post function that gets my json.

I want to print out all the

max_slots, base_image and c_name as they are in a array I am trying to loop though save value to scope to use in my HTML.

Am I doing this right ? if not whats the best way to do this ?

OBJECTIVE

display the results of the json array post in my html

What I am trying

$scope.c_name = [0]; $scope.GetData = function () { $http({ url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign", method: "POST", date: {}, headers: {'Content-Type': 'application/json'} }).then(function (data) { // success console.log('you have received the data '); console.log(data); // $scope.base_image = response.base_image; $scope.c_name = response.c_name; $scope.c_name = data.data.c_name; // for(var i = 0; i < c_name.length; i++) { // var obj = c_name[i]; // // console.log(obj.id); // } // $scope.max_slots = data.data.max_slots; // $scope.slot_image = data.slots.base_image; // console.log($scope.c_name); }, function (response) { // failed console.log('failed getting campaigns goo back to log in page.'); console.log(response); }); };

My HTML

<body ng-app='myApp'> <h2>name</h2>: {{c_name}} <h2>max slots</h2>: {{max_slots}} <h2>image</h2>: {{base_image}} </body>

JavaScript

 $scope.GetData = function () { $http({ url: "http://www.####.co.uk/####/####/####", method: "POST", date: {}, headers: {'Content-Type': 'application/json'} }).then(function (data) { // success console.log('you have received the data '); console.log(data); // $scope.base_image = response.base_image; $scope.c_name = response.c_name; // $scope.c_name = data.data.c_name; for(var i = 0; i < c_name.length; i++) { var obj = c_name[i]; console.log(obj.id); } // $scope.max_slots = data.data.max_slots; // $scope.slot_image = data.slots.base_image; // console.log($scope.c_name); }, function (response) { // failed console.log('failed getting campaigns goo back to log in page.'); console.log(response); }); }; $scope.GetData();

console.log(data) result

try data[0].max_slots, data[0].c_name and data[0].slots[0].base_image — Nico Van Belle, CommentedSep 26, 2017 at 11:00
@Beep I would first create an element directive that will display one element from that array and then use an ng-repeat on data received from that API. This solution is if I understood well and you want to display more similar objects from the same array — Cosmin, CommentedSep 26, 2017 at 11:11
@Cosmin Ok I think I know what you mean, so ng-repeat would perform the loop ? — Beep, CommentedSep 26, 2017 at 11:13
@Beep yes. In then statement from http request you would need to assign the data to your scope to have the data accessible in the template e.g $scope.myList = data; and then in template you can perform the loop on directive that you've constructed like: <span ng-repeat="data in myList"><my-new-element name="{{data.c_name}}" slots="{{max_slots}}"/></span> something like that. — Cosmin, CommentedSep 26, 2017 at 11:19

Syam Pillai · Accepted Answer · 2017-09-26 11:38:57Z

Since the data in your API response is an Array. You can not just retrieve the values with dots

Try changing $scope.c_name = data.data.c_name; with $scope.c_name = data.data[0].c_name; and so on.

OR

$scope.responseData = data.data[0];

And in your html

<body ng-app='myApp'> <h2>name</h2>: {{responseData.c_name}} <h2>max slots</h2>: {{responseData.max_slots}} <h2>image</h2>: {{responseData.base_image}} </body>

EDIT: Considering chance for occurring more than one element in data array

$scope.responseData = data.data;

and in the HTML:

<body ng-app='myApp'> <div ng-repeat="data in responseData"> <h2>name</h2>: {{data.c_name}} <h2>max slots</h2>: {{data.max_slots}} <h2>image</h2>: {{data.base_image}} </div> </body>

If you are sure that there is a chance for more than one element in the API response, yes ng-repeat is needed. Even though it's only one element, usage of ng-repeat is preferred — Syam Pillai, CommentedSep 26, 2017 at 11:34
there will be multiple names, max slots and images so ng-repeat for all ? — Beep, CommentedSep 26, 2017 at 11:37
According to the response structure c_name and max_slots are strings. That won't be an array. If there are multiple names, that should come in different array elements. But if you want to show d_text also, then you have to ng-repeat the data inside the ng-repeat of responseData since it's an array — Syam Pillai, CommentedSep 26, 2017 at 11:40

Collectives™ on Stack Overflow

display json array data on page angular

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related