Display Data from JSON that doesn't have a name with Angular JS

Question

The json I'm working with goes something like this:

{
 nameofProduct: {
   Alive: {
        ImServer1: {
              status: "low",
              title: "ImServer1"
        },
        ImServer2: {
             status: "high",
             title: "Imserver2"
       },
       ImServer3: {
             status: "medium",
             title: "ImServer3"
       }

I'm trying to display the name ImServer1, ImServer2, ImServer3 and their status and title inside.

My angular js. js file looks like this

   var app = angular.module("nameofproduct", []);

     app.controller("MainController", function($scope, $http) {
      $scope.loading = true;
      $http.get('https://jsonp.nodejitsu.com/?url=http://jsonp.jit.su/?url=httpfakeurl.com').
      success(function(data, status, headers, config) {
      $scope.Servers = data;
      $scope.loading = false;
      }).
        error(function(data, status, headers, config) {
        console.log(data);
     });
});

Currently I have my html set up like this:

<body ng-app="nameofproduct">
 <div ng-controller="MainController">
 <div class="col-lg-6" ng-repeat="server in Servers">
        <div class="col-lg-6">{{server.nameofServer.Alive}}   </div>
        <div class="col-lg-1"><i class="{{server.status == 'low' ? 'thumbs-down' : 'humbs-up'}}" style="{{server.status == 'low' ? 'color:red;' : 'color:green;'}}"></i></div>
         <div class="col-lg-5">
                   <span class="badge" ng-class="{'badge-offline': server.status == 'low', 'badge-low': server.status == 'Low', 'badge-medium': server.status == 'medium', 'badge-high': server.status == 'high', 'badge-vhigh': server.status == 'evry high'}">{{server.status}}
                   </span>
         </div>

But at the moment is just displays all the data, and doesn't split it apart. I'm not sure what I'm missing and how to proceed.

You could transform the object to an array in success function like: for(int i=0;i<Object.keys(data).length;i++){ newData.push(Object.keys[i]) } to transform object to an array. — kahonmlg
– kahonmlg, Commented Jan 25, 2015 at 10:51

James Waddington · Accepted Answer · 2015-01-25 12:09:51Z

1

Given the json you have, when you do $scope.Servers = data, what you're really putting in $scope.servers is products. So your ng-repeat is going to try to loop through nameofProduct and anything else on that level.

So ng-repeat says ok, the first element is nameofProduct. Now I need to print server.nameofServer.Alive for that.. which is pretty much everything in the above son.

To loop through the individual servers, you would change your assignment in the controller to

$scope.Servers = data.nameofProduct.Alive;

To do it if you don't know the nameofProduct when you write the code you could either use a loop, or if it will not be an array but a single product use Object.keys():

var productName = Object.keys(data)[0];
$scope.Servers = t[productName].Alive;

answered Jan 25, 2015 at 12:09

James Waddington

2,9252 gold badges17 silver badges24 bronze badges

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

Comments

Satbir Singh · Accepted Answer · 2015-01-25 12:59:48Z

Currently what you are doing is assigning the data that came from http service directly to $scope.Servers = data; which is not correct.

Take a look at the JSON.

{
 nameofProduct: {
  Alive: {
    ImServer1: {
          status: "low",
          title: "ImServer1"
    },
    ImServer2: {
         status: "high",
         title: "Imserver2"
   },
   ImServer3: {
         status: "medium",
         title: "ImServer3"
     }
   }
 }

To get the all server name and their sattus you have to use the (.) on the JSON object "nameofProduct" like this:

$scope.Servers = $scope.data.nameofProduct.Alive;

and then assign it on server property that is on scope object.

Take a look at this fiddle. You would get your answer for sure. I have modified it as per question requirement

http://jsfiddle.net/Satbir/HB7LU/10377/

Collectives™ on Stack Overflow

Display Data from JSON that doesn't have a name with Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related