unable to get data into plain text (table) from json data using angular js

Question

I want to show json data into a table, but its showing the result as below shown. How to show json data in table in angular js.

userid  {{x.userid}}
status  {{x.status}}

Desired output:

userid 0000acfffe731122
status 3

Json data:

{  
   "userid":"0000acfffe731122",
   "status":3
}

<table>
    <tr>
        <td>
            device id
        </td>
        <td>
            {{names.userid}}
        </td>
    </tr>
    <tr>
        <td>
            device status
        </td>
        <td>{{names.status}}</td>
    </tr>
</table>

<script>
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('https://example.com/abc', {
headers: { 'Authorization': 'Basic a2VybmVsc==' }
})
.then(function(response) {
    $scope.names = response.data;
});
});
</script>

your json data is an array or object?

CozyAzure
– CozyAzure

2016-12-31 13:39:57 +00:00
Commented Dec 31, 2016 at 13:39 — CozyAzure
– CozyAzure, Commented Dec 31, 2016 at 13:39
its a JSON object

Swapna
– Swapna

2016-12-31 13:42:12 +00:00
Commented Dec 31, 2016 at 13:42 — Swapna
– Swapna, Commented Dec 31, 2016 at 13:42
then why are you using ng-repeat?

CozyAzure
– CozyAzure

2016-12-31 13:45:03 +00:00
Commented Dec 31, 2016 at 13:45 — CozyAzure
– CozyAzure, Commented Dec 31, 2016 at 13:45
yes ng- repeat is not needed.

Swapna
– Swapna

2016-12-31 13:46:53 +00:00
Commented Dec 31, 2016 at 13:46 — Swapna
– Swapna, Commented Dec 31, 2016 at 13:46

kukkuz · Accepted Answer · 2016-12-31 13:49:36Z

1

Your names object must be an array if you have to use ng-repeat, as that is what it is there for:

[{
  "userid": "0000acfffe731122",
  "status": 3
}];

See Demo below:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  $scope.names = [{
    "userid": "0000acfffe731122",
    "status": 3
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr ng-repeat="x in names">
    <td>user id -</td>
    <td>{{x.userid}}</td>
  </tr>
  <tr ng-repeat="x in names">
    <td>status -</td>
    <td>{{x.status}}</td>
  </tr>
</table>

If it can't be an array you can use names.userid and names.status - see demo below:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  $scope.names = {
    "userid": "0000acfffe731122",
    "status": 3
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr>
    <td>user id -</td>
    <td>{{names.userid}}</td>
  </tr>
  <tr>
    <td>status -</td>
    <td>{{names.status}}</td>
  </tr>
</table>

edited Dec 31, 2016 at 13:49

answered Dec 31, 2016 at 13:47

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

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

7 Comments

Swapna Over a year ago

what about $scope.names = response.data;or data.records;

kukkuz Over a year ago

of course, you can do that by fetching the data from your server... I don't have access to it to show you a demo :)

Swapna Over a year ago

still im getting like that only.

kukkuz Over a year ago

do a console.log(response.data.record) inside the .then(function(){ to see how the data is coming from the url...

kukkuz Over a year ago

and also check if you have put ng-app and ng-controller on the html?

|

Collectives™ on Stack Overflow

unable to get data into plain text (table) from json data using angular js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related