Angular How can i use that Json Data

Question

i have to use the data coming from that service:

http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=london

All the data is mixed with html, after cleaning it with that online tools

Here's the data:

cb({
        "title": "Recent Uploads tagged london",
        "link": "http://www.flickr.com/photos/tags/london/",
        "description": "",
        "modified": "2015-06-27T17:21:27Z",
        "generator": "http://www.flickr.com/",
        "items": [
       {
            "title": "Citywards",
            "link": "http://www.flickr.com/photos/peterphotographic/19182673346/",
            "media": {"m":"http://farm1.staticflickr.com/269/19182673346_eae48f0d5d_m.jpg"},
            "date_taken": "2015-06-22T20:25:21-08:00",
            "description": " <p><a href=\"http://www.flickr.com/people/peterphotographic/\">peterphotographic<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/peterphotographic/19182673346/\" title=\"Citywards\"><img src=\"http://farm1.staticflickr.com/269/19182673346_eae48f0d5d_m.jpg\" width=\"173\" height=\"240\" alt=\"Citywards\" /><\/a><\/p> <p>W&amp;DPS City Walk 2015<br /> <br /> Thameside, London, UK<\/p>",
...ETC

What should I do to clean and display for example each item in a ng-repeat?

here's the Plunker

For somes who can't see anything it is probably because you are getting an Access-Control-Allow-Origin issue, you can install this chrome plugin, activate it and refresh the page you will see the data and the log:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

I met the same problem.

Yash · Accepted Answer · 2015-06-27 18:42:36Z

For somes who can't see anything it is probably because you are getting an Access-Control-Allow-Origin issue, you can install this chrome plugin, activate it and refresh the page you will see the data and the log:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

The bad way to do it, cause you can't ask your users to allow Cross Origin Calls, since you make them vulnerable to attacks. Relevant OWASP wikis -> CORS, CSRF

The response is you are getting is JSONP. For cross domain request we should use JSONP.

You should change &jsoncallback=cb to &jsoncallback=JSON_CALLBACK because AngularJS $http method wants it to be that otherwise the .success wont fire.

Another thing from your code, method: 'POST' is used to send data to server and not to get data. So to get data from server we should use HTTP GET method.

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.data = null;
  $http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london')
    .success(function(res) {
      console.log(res.items);
      $scope.data = res.items;
    })
    .error(function() {
      //handle error
    });
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <hr />
   <div ng-repeat="item in data">
      <div>
        <p>Title: {{item.title}}</p>
        <p>Author: {{item.author}}</p>
        <img ng-src="{{item.media.m}}" />
        <p>Tags: {{item.tags}} </p>
        <p>Published at: {{item.published}}</p>
      </div>
      <hr />
    </div>
  </body>
</html>

Updated Plunker: http://plnkr.co/edit/K8JtNnf2nAioOUrCfuDm?p=preview

jjczopek · Accepted Answer · 2015-06-27 18:31:46Z

It looks like Flickr uses JSONP, as you have to provide the callback function name. Therefore I think that the URL you are calling should look like following:

http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london (notice the changed value of the jsoncallback param). And you should use the JSONP method of HTTP to make the call:

return $http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london');

and then in the controller:

app.controller('MainCtrl', function($scope, $http, getFlickrImages) {
$scope.data = null;
     getFlickrImages.getData().then(function(dataResponse) {
       $scope.data = dataResponse;     
   });

});

$scope.data should hold the payload of the call as JS object. If it passed as string, you can easily parse it to JS object with angular.fromJSon() function.

Then in the UI you can do the following:

<body ng-controller="MainCtrl">
   <div ng-repeat="item in data.items">
      <div>
       <h1>{{item.title}}</h1>
      </div>
    </div>
  </body>

I haven't tested the code, so it's provided as-is.

Collectives™ on Stack Overflow

Angular How can i use that Json Data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related