CODEWITHSUNDEEP
htmljsonangularjs
Zaeem Habib
Zaeem Habib

Reputation: 95

AngularJS, how to display contents of a received JSON object

I have successfully received the JSON object from an API, which is evident from a console.log code. Now, I want to display the various elements in that JSON file. For example, the JSON contains elements like "name" and "url". How do I display these individually, in an h1 HTML element, after clicking the submit button and fetching the JSON file. I'm a newbie and sorry if this is an obvious question, I'm kinda stuck and need help. Thank you in advance!

My HTML Code is:

<body ng-app="myApp">
    <div ng-controller="UserCtrl">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="formData.searchText"/> <br/><br/>

        <button ng-click="getByID()">Submit</button>
        {{response.data.name}}
</body>

The JS is:

var myApp = angular.module('myApp', []);
myApp.controller('UserCtrl', function($scope, $http) {
     var id = "my secret key comes here";
     $scope.formData = {};
     $scope.searchText;

     $scope.getByID = function() {
        $http.get("https://rest.bandsintown.com/artists/" + $scope.formData.searchText + "?app_id="+id)
        .then(response => {
            console.log(response.data.name)
        })   
     }
});

Thank you so much in advance!

Upvotes: 0

Views: 594

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Put the data on $scope:

$scope.getByID = function() {
    var url = "https://rest.bandsintown.com/artists/" + $scope.formData.searchText;
    var params = { app_id: id };
    var config = { params: params };
    $http.get(url, config)
    .then(response => {
        console.log(response.data.name)
        $scope.data = response.data;
    })   
}

Then use the ng-repeat directive:

<body ng-app="myApp">
    <div ng-controller="UserCtrl">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="formData.searchText"/> <br/><br/>

        <button ng-click="getByID()">Submit</button>
        {{data.name}}<br>
        <div ng-repeat="(key, value) in data">
           {{key}}: {{value}}
        </div>
    </div>
</body>

For more information, see

Upvotes: 1

Bill P
Bill P

Reputation: 3618

You need to use a variable to assign it with the response data and then use it in html. For example to display name from response.data.name:

<body ng-app="myApp">
    <div ng-controller="UserCtrl as vm">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="vm.searchText"/> <br/><br/>

        <button ng-click="vm.getByID()">Submit</button>

        <h1>{{ vm.name }}</h1>
</body>

In controller:

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

     let vm = this;

     var id = "my secret key comes here";

     vm.searchText;
     vm.name;

     vm.getByID = function() {
        $http.get("https://rest.bandsintown.com/artists/" + vm.searchText + "?app_id="+id)
        .then(response => {
            console.log(response.data.name);
            vm.name = response.data.name;
        })   
     }
});

Upvotes: 1

Related Questions