Display data in JSON URL using AngularJS

Question

I'm new to ionic/angularjs and I need to know how to display data to a HTML view from a Json url.

So, data in my Json URL looks like this:

{
  News: [
        {
          id: "1",
          title: " It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
          image: "uploads/news/fortunaglobal_logo.jpg",
          status: "yes"
        },
        {
          id: "2",
          title: "fgdf",
          description: "hhjgh",
          image: "uploads/news/16613_10204428208286459_7484489390034618482_n.jpg",
          status: "yes"
        }
      ]
}

I tried this in my script:

.controller('NewsCtrl', function($scope, $http) {   

        $http.get('    "JSON URL"   ')
           .success(function(response, status, headers, config){

              window.alert('came in');
              if(status==200){

                 $scope.news = response.data['News'];
                 window.alert($scope.news );

              } else {
                 window.alert('No internet Connection');
              }
              console.log(news);
           })
          .error(function(data,status,headers,config){
              window.alert('error '+data+status);
              console.log(data);
              console.log(status);
         });
})

And this in my html page

<ion-view title="News" ng-controller="NewsCtrl">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>


    <ion-content  class="has-header" scroll="true" padding="true">




    <ul ng-repeat="newsS in news">
      <li>{{newsS.title}}</li>
    </ul>


    </ion-content>
</ion-view>

Can someone explain to me what I am doing wrong?

I'm unfamiliar with ionic, but to make your code simpler, you don't have to check for the status in the success handler, if you have no connection it'll go into error — Philipp Gayret
– Philipp Gayret, Commented Oct 2, 2014 at 7:35
Can you please add more information on what you want us to answer? — magnudae
– magnudae, Commented Oct 2, 2014 at 7:39
i want show the data in my json in a html view using angularjs — CraZyDroiD
– CraZyDroiD, Commented Oct 2, 2014 at 8:08
Yes but where is your problem right now? Does the console log show the desired data? dOes it display any data in your HTML? Does it display wrong data in your HTML? Are there any errors on your console? — kasoban
– kasoban, Commented Oct 2, 2014 at 8:10

kasoban · Accepted Answer · 2014-10-02 08:15:32Z

3

Since you are not specific enough I can only guess what you're trying to get at, but I see some things that might be problematic:

$scope.news = response.data['News'];

If your described JSON from above is the full response, this data should directly be contained in your response element (which is actually supposed to be named data according to the angular documentation).

So try this instead:

$scope.news = response.News;

Next thing that can't work is

console.log(news);

Your variable news is nowhere defined, maybe you meant to use $scope.news?

answered Oct 2, 2014 at 8:15

kasoban

2,17717 silver badges25 bronze badges

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

2 Comments

CraZyDroiD Over a year ago

what should i do if i want to display a image from a url which is in the json.

kasoban Over a year ago

For practice with a single image just add a <img> element to your News view, hook it up to an ng-if=newsS.image and set its src attribute as src={{newS.image}}

Collectives™ on Stack Overflow

Display data in JSON URL using AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related