CODEWITHSUNDEEP
javascripthtmlangularjs
kuhle
kuhle

Reputation: 193

How to display a returned json in angular view?

I am implementing a search in the github repository. I need to display the information that i get from here: https://api.github.com/search/repositories?q=bootstrap . for instance into a view or HTML

<div ng-app="newsearchApp">
<div ng-controller="MainCtrl">
  <form action="#/about" method="get">
  <input ng-model="searchText" />
  <button ng-click="search()">Search</button>
  </form>
</div>
</div>

the code for searching the Github repository;

angular.module('newsearchApp')
.controller("MainCtrl", ["$scope", function($scope) {
$scope.searchText = "";
$scope.search = function() {
  console.log($scope.searchText);
  var item = $scope.searchText;
 // console.log(item)
  var GithubSearcher = require('github-search-api');
  var github = new GithubSearcher({username: '[email protected]',   password: 'passwordHere'});
  var params = {
    'term': $scope.searchText
  };
  //i am not certain about the 'userData'
  github.searchRepos(params, function(data) {
    console.log(data);
    $scope.userData = data; //i am not certain about the 'repoData'
  });
     } }]);

the problem is here, when populating the json object to HTML

<div ng-repeat="repo in userData | filter:searchText  | orderBy:predicate:reverse" class="list-group-item ">
  <div class="row">
  <div class="col-md-8">
  <h4>
  <small>
  <span ng-if="repo.fork" class="octicon octicon-repo-forked"></span>
  <span ng-if="!repo.fork" class="octicon octicon-repo"></span>
  <small>{{repo.forks_count}}</small>
  </small>
  <a href="{{repo.html_url}}" target="_blank" >
  {{repo.name}}
  </a>
  <small>{{repo.description}}</small>
  <small>{{repo.stargazers_count}}</small>
  <a href="{{repo.open_issues_count}}" target="_blank" >
   Open Issues
  </a>
  <small>{{}}</small>
  </h4> 
  </div> 
  </div> 
  </div>

the results are null on the HTML but are not null on the console.

thanks in advance the results are null

Upvotes: 2

Views: 87

Answers (3)

georgeawg
georgeawg

Reputation: 48948

The GitHub API can be accessed using the AngularJS $http service:

app.controller("myVm", function($scope,$http) {
    var vm = $scope;
    var url = "https://api.github.com/search/repositories?q=bootstrap"
    $http.get(url).then(function onSuccess(response) {
        vm.data = response.data;
        console.log(vm.data);
    })

})

HTML

<div ng-app="myApp" ng-controller="myVm">
    <div ng-repeat="item in data.items">
    {{item.full_name}}
    </div>
</div>

The DEMO on JSFiddle

Upvotes: 1

WilomGfx
WilomGfx

Reputation: 2013

Since you're not using the Angular $http service, angular is not aware of the changes. You need to manually tell Angular to re-render and evaluate by using

$scope.$apply();

Upvotes: 0

Christian Zosel
Christian Zosel

Reputation: 1424

The problem is, that Angular doesn't notice that the GitHub server has answered and doesn't update the view. You have to tell Angular manually to re-render the view. Try calling $scope.$apply():

github.searchRepos(params, function(data) {
  console.log(data);
  $scope.userData = data;
  $scope.$apply();
});

If you'd make your request to the GitHub API with Angulars $http service, then this would not be needed - you'll only need $scope.$apply() if something asynchronous happens which doesnt live in the "Angular world" - for example things like setTimeout, jQuery ajax calls, and so on. That's why there are Angular wrappers like $timeout and $http.

More details: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Upvotes: 1

Related Questions