How do I incorporate JSON data in Angular?

Question

How do I incorporate JSON data in Angular?

When working with the data from a specific service, I found it necessary to utilize the information provided by the following link:

The data contains HTML mixed in, which can be cleaned using an online tool

Below is a snippet of the data obtained:

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

To clean and display each item using ng-repeat, what steps should I take?

Access the corresponding Plunker for demonstration purposes at this link

If you are facing difficulty viewing content due to Access-Control-Allow-Origin issues, consider installing this Chrome extension to resolve the problem:

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

I encountered a similar issue as well.

javascript json angularjs

Answer 1

Answer №1

If you're unable to view anything, it may be due to an Access-Control-Allow-Origin issue. You can address this by installing a Chrome plugin, activating it, and then refreshing the page to see the data and log:

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

It's not advisable to instruct users to enable Cross Origin Calls as it exposes them to potential security risks. More information can be found at OWASP: CORS, CSRF

The response you're receiving is in JSONP format (JSONP). For cross-domain requests, JSONP should be used.

In your code, change &jsoncallback=cb to &jsoncallback=JSON_CALLBACK because AngularJS requires it for the $http method to work with .success.

Additionally, method: 'POST' is intended for sending data to the server, not retrieving data. To obtain data from the server, use the 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1909f96849d9083df9b82b1c0dfc2df89">[email protected]</a>" 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

Answer 2

If you're unable to view anything, it may be due to an Access-Control-Allow-Origin issue. You can address this by installing a Chrome plugin, activating it, and then refreshing the page to see the data and log:

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

It's not advisable to instruct users to enable Cross Origin Calls as it exposes them to potential security risks. More information can be found at OWASP: CORS, CSRF

The response you're receiving is in JSONP format (JSONP). For cross-domain requests, JSONP should be used.

In your code, change &jsoncallback=cb to &jsoncallback=JSON_CALLBACK because AngularJS requires it for the $http method to work with .success.

Additionally, method: 'POST' is intended for sending data to the server, not retrieving data. To obtain data from the server, use the 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1909f96849d9083df9b82b1c0dfc2df89">[email protected]</a>" 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

Answer 3

Answer №2

It appears that Flickr utilizes JSONP, requiring the callback function name to be provided. In light of this, it seems like the URL being called should resemble the one below:

(please note the updated value of the jsoncallback parameter). Make sure to utilize the JSONP method of HTTP when making the request:

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

Following that, in the controller:

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

});

$scope.data must contain the retrieved data as a JavaScript object. If it's returned as a string, you can easily convert it into a JavaScript object using the angular.fromJSon() function.

Subsequently, in the user interface, you can implement the following:

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

I haven't validated the code, so please consider it provided as-is.

Answer 4

It appears that Flickr utilizes JSONP, requiring the callback function name to be provided. In light of this, it seems like the URL being called should resemble the one below:

(please note the updated value of the jsoncallback parameter). Make sure to utilize the JSONP method of HTTP when making the request:

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

Following that, in the controller:

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

});

$scope.data must contain the retrieved data as a JavaScript object. If it's returned as a string, you can easily convert it into a JavaScript object using the angular.fromJSon() function.

Subsequently, in the user interface, you can implement the following:

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

I haven't validated the code, so please consider it provided as-is.

How do I incorporate JSON data in Angular?

Answer №1

Answer №2

Similar questions

Error: The attempt to perform 'toDataURL' on 'HTMLCanvasElement' has failed because tainted canvases cannot be exported

Counting numbers and displaying results using JavaScript with a JSON string

Is there a way to run a Javascript function only after an onload event has occurred and returned a specific value?

Types of flow. What sets apart type {} from {||}?

The onBlur function is preventing link clicks from being registered

When attempting to process JSON using the fetch method, the value for a valid JSON key

Issue with IonicModal: $scope.ionicModal.show() stops functioning properly following $scope.ionicModal.remove() being called

Obtaining encrypted data in json format

Tips for removing a previous file from an 'input type' in HTML5 FileReader

choosing a specific item using Cheerio that has a period in its class name

Selenium and JavaScript integration for opening new browser tabs

Guide on creating an empty ArrayList in JSON using Rest Assured

Associating Java and Mongo Objects using a customized format

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

What is the best way to display a MySQL Nested Set?

What could be causing my function to not register with my EventListener?

Utilize the power of Await Async while iterating through a massive JSON dataset

Skipping code in JavaScript/jQuery function on window load

Connect to content on the current page