Displaying JSON data with ng-bind shows [object object]

Question

I'm new to angular js,I have 2 goals:

OnClick, display a single person's name from a JSON array,
Randomize name on every click

I'm stuck at the part where i need to pass the json data to the view: when i click the button i get [object object], [object object], [object object] Could someone please assist?

[
    {"name": "John"},
    {"name": "Sue"},
    {"name": "Sally"},
    {"name": "Jim"},
    {"name": "Bev"},
    {"name": "Joe"},
    {"name": "Jess"}
]

script

  var peopleApp = angular.module('peopleApp', []);
    idApp.controller('peopleCtrl', ['$scope', '$http', function ($scope, $http){
      $scope.randomPerson = function(){
      $http.get('js/people.json').
       success(function(data) {
       $scope.person = data;
       console.log(data);
  });
 }
}]);

view

<div class="content">
 <div ng-controller="peopleCtrl">
  <p ng-bind="name"></p>
   <button ng-click="randomPerson()">
    Show random person's name
   </button>
   <p ng-bind="person"></p>
 </div>
</div>

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2016-03-12 15:08:27Z

You need to show a simple value after to get a random object of your array.

Something like this:

var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('peopleCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.data = [{
      "name": "John"
    }, {
      "name": "Sue"
    }, {
      "name": "Sally"
    }, {
      "name": "Jim"
    }, {
      "name": "Bev"
    }, {
      "name": "Joe"
    }, {
      "name": "Jess"
    }];
    $scope.person = "";
    $scope.randomize = function(count) { // This function returns a random number, between 0 to the $scope.data.length.
      return Math.floor((Math.random() * count) + 0);
    };
    $scope.randomPerson = function() { // By using array.filter you can get a specific object.
      $scope.person = $scope.data.filter(function(x) {
        return x.name;
      })[$scope.randomize($scope.data.length)]; // Getting the random object.
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="peopleApp" class="content">
  <div ng-controller="peopleCtrl">
    <p ng-bind="name"></p>
    <button ng-click="randomPerson()">
      Show random person's name
    </button>
    <p data-ng-bind="person.name"></p>
  </div>
</div>

More simpler and better: Without using array.filter.

var peopleApp = angular.module("peopleApp", []);
peopleApp.controller("peopleCtrl", ["$scope", "$http",
  function($scope, $http) {
    $scope.data = [{
      "name": "John"
    }, {
      "name": "Sue"
    }, {
      "name": "Sally"
    }, {
      "name": "Jim"
    }, {
      "name": "Bev"
    }, {
      "name": "Joe"
    }, {
      "name": "Jess"
    }];
    $scope.person = "";
    $scope.randomize = function(count) { // This function returns a random number, between 0 to the $scope.data.length (count).
      return Math.floor((Math.random() * count) + 0);
    };
    $scope.randomPerson = function() {
      $scope.person = $scope.data[$scope.randomize($scope.data.length)]; // Getting the random object.
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="peopleApp" class="content">
  <div ng-controller="peopleCtrl">
    <p ng-bind="name"></p>
    <button ng-click="randomPerson()">
      Show random person's name
    </button>
    <p data-ng-bind="person.name"></p>
  </div>
</div>

Mr Lister · Accepted Answer · 2016-03-19 08:35:20Z

The reason this is happening is because you are sending an array of objects from the controller to your view.

And then you directly bind the array to a <p> tag. So the entire array is getting displayed with object as it is unparsed on your view..

try changing

<p ng-bind="person"></p>

To :

<p ng-bind="person[randomIndex].name"></p>
 // here random index is a random number 
 // where range of random number generator is from 0 to length of person array

you can generate a random number on click of function like this. If you wanted to get between 0 and length of array, you would put:

Math.floor(Math.random() * person.length) + 0

OR More specifically something like this ....

    $scope.randomPerson = function(){

      $http.get('js/people.json')
           .success(function(data) {
              $scope.person = data;
              var randomPersonIndex =Math.floor(Math.random() * $scope.person.length) + 0 ;
              $scope.myRandomPerson = $scope.person[randomPersonIndex];
              console.log(data);
  });

And then on HTML you do ....

<p ng-bind="myRandomPerson.name"></p>
     // here random index is a random number

Maheen Nasir · Accepted Answer · 2017-09-07 07:24:50Z

1

Simple and easy just need to add "| json" with your function name. for example

<p ng-bind="person | json"></p>

answered Sep 7, 2017 at 7:24

Maheen Nasir

6965 gold badges19 silver badges40 bronze badges

Collectives™ on Stack Overflow

Displaying JSON data with ng-bind shows [object object]

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related