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

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>

Answer 1

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>

Answer 2

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

Answer 3

Simple and easy just need to add "| json" with your function name.
for example
<p ng-bind="person | json"></p>