Angular 4: Decoding the json_callback response from the server

When using Angular 4, I made a GET request to the following URL:

Here is the code I used:

  this.http.get('https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=JSON_CALLBACK', {
    params: { format: 'json', tagmode: 'all', tags: query }
  })
  .subscribe(data => {
    console.log(data);
  });

The response I received is in the format shown below, wrapped as an argument in a method:

JSON_CALLBACK({
    "title": "Recent Uploads tagged test",
    "link": "https:\/\/www.flickr.com\/photos\/tags\/test\/",
    "description": "",
    "modified": "2018-02-04T14:51:42Z",
    "generator": "https:\/\/www.flickr.com",
    "items": [
   {
        "title": "Desktop2018-02-04-14_39_44.jpg",
        "link": "https:\/\/www.flickr.com\/photos\/besnaveld\/28298869359\/",
        "media": {"m":"https:\/\/farm5.staticflickr.com\/4769\/28298869359_e932760377_m.jpg"},
        "date_taken": "2018-02-04T06:51:42-08:00",
        "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/besnaveld\/\">besnaveld<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/besnaveld\/28298869359\/\" title=\"Desktop2018-02-04-14_39_44.jpg\"><img src=\"https:\/\/farm5.staticflickr.com\/4769\/28298869359_e932760377_m.jpg\" width=\"240\" height=\"135\" alt=\"Desktop2018-02-04-14_39_44.jpg\" \/><\/a><\/p> ",
        "published": "2018-02-04T14:51:42Z",
        "author": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddb3b2bfb2b9a49dbbb1b4beb6aff3beb2b0">[email protected]</a> (\"besnaveld\")",
        "author_id": "154665852@N05",
        "tags": "test booth"
   } ]
})

What is the best way to extract the data from this JSON_CALLBACK function argument?

jsonangulartypescriptflickr

Answer №1

After reviewing the filckr document, simply include the following:

nojsoncallback=1    -> {...}
jsoncallback=wooYay -> wooYay({...});

in your request to ensure accuracy. Your URL should then be:

https://api.flickr.com/services/feeds/photos_public.gne?nojsoncallback=1&format=json&tagmode=all&tags=test

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compressing JSON objects for push notification delivery on iOS and Android platforms with PHP

I am sending the push notifications in the chat module using curl for IOS and FCM for android. In which we are sending some of our database entities to enable users to share our in-app content with each other. Scenario: As a third party, I am using pushe ...

phpandroidiosjsoncompression

Ways to loop through numerous JSON data replies?

I need to figure out how to receive multiple responses from PHP on my Android device. Here is a snippet of the code I have in PHP: while ($row = mysql_fetch_array($data)) { $response["post"] = strip_tags($row["post_text"]); $response["date"] = da ...

javaphpandroidjson

What is the best method to assign a class to a parent div when a radio button is selected in AngularJS2?

There are four div elements with radio buttons inside the filterbystar div. When a user selects a radio button, it should be marked as selected, the filterbystar div should have an active class added to it, and the radio button should no longer be visible. ...

angular

Is there a way for me to divide the data in a JSON file and display user tags in place of their IDs?

Looking to create a list admins command for a bot, I'm facing challenges in converting user ids to tags within the command. Take a look at what I have accomplished so far: const { MessageEmbed } = require('discord.js'); const { readFileSync, ...

javascriptnode.jsjsondiscorddiscord.js

Accessing a JSON file over a network using JavaScript

Struggling to access a basic data file using JavaScript, and it's proving to be quite challenging. The file will be hosted on a remote server and ideally accessed via HTTP. While I'm new to JavaScript, I've come across JSONP as a potential s ...

javascriptjqueryajaxjson

The unexpected behavior of rxjs withLatestFrom

import { of, Subject, interval } from 'rxjs'; import { tap, startWith, map, delay, publishReplay, publish, refCount, withLatestFrom, switchMap, take } from 'rxjs/operators'; const source$ = new Subject(); const res ...

angularrxjsmulticastreplaysubject

Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

I am currently searching for a resolution to this issue without making any upgrades to Angular or its dependencies, as it could potentially impact other parts of the code base https://i.sstatic.net/Jeb55.png package.json { "name": "angular4", "v ...

c#angulartypescriptwebsocket

What is the best location to include current user context data in the response JSON?

Imagine a digital platform where users can share content. When you access the feed with /feed, you receive a list of posts. Within the user interface, there are various elements related to each post, such as whether a user liked or starred a post. However ...

jsonapirestsocial-networking

"Using TypeScript: How to effectively wait for the completion of the array.sort

Need to implement a loading screen in Angular until an array is sorted. Solution provided below: this.isSorting = true; this.array = this.array.sort((a,b) => a.totlaTime - b.totalTime); this.isSorting = false; The issue faced is when isSorting is set t ...

angulartypescript

Utilizing JQuery to extract JSON data from a web service

I'm utilizing a web service to retrieve statistical information. The web service returns the results in JSON format. Below is the jQuery code I am using to fetch data from the web service: $.ajax({ type: "POST", url: webMethod, //data: p ...

jqueryjsonweb-services

I keep receiving error code TS2339, stating that property 'total' is not recognized within type any[]

Check out this code snippet. Can you provide some assistance? responseArray: any[] = []; proResponseArray: any[] = []; clearArray(res: any[]): void {res.length = 0; this.response.total = 0; } handleSubmit(searchForm: FormGroup) { this.sho ...

angulartypescript

How to process response in React using Typescript and Axios?

What is the proper way to set the result of a function in a State variable? const [car, setCars] = useState<ICars[]>([]); useEffect(() =>{ const data = fetchCars(params.cartyp); //The return type of this function is: Promise<AxiosRespo ...

reactjstypescriptaxios

Understand the nature of the reply

Can someone tell me the type of response an action controller will give before the instructions? respond_to do |format| format.html{ ... end Is it possible to determine this beforehand? Many thanks! ...

ruby-on-railsrubyjsonresponse

IONIC 3 [ERROR] There was a problem encountered during the execution of cordova run android, resulting in an exit code of 1

While trying to run the command 'ionic cordova run android' for Ionic 3, I encountered an error that has left me stumped. Here's a snapshot of the error message: This Result Error [13:29:45] preprocess started ... [13:29:45] deeplinks sta ...

androidangularcordovaionic3

Release a new font on npm for integration into your project

In my current web-application project using angular2, I've designed a unique set of music glyphs such as notes, dotted notes, and time signatures. I couldn't find an existing font that suited my needs, so I created this custom font hierarchy: f ...

angularfontsnpmglyph

Guide to importing external CSS styles into Angular 2 using the require method

I'm facing an issue with loading an external css file in different environment files. My setup includes two environments: development and production. Loading the css file locally works fine in development mode, but not in production mode. environment ...

javascriptcssangularwebpackstyles

Creating a 2-dimensional array using Json in C# MVC: A step-by-step guide

Presently, I am utilizing this particular class public class FooResult { public int sEcho; public Foo[] aaData; internal FooResult() { sEcho = 1; aaData = new FooRepository().GetAll().ToArray(); } } new FooRepository() ...

c#asp.net-mvcarraysjson

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

Utilizing webpack to implement HTML loaders alongside Angular 2's built-in directives in lowercase

While using html-loader to load my HTML template and file-loader to load images within the template, everything works smoothly in development. However, when I build for production and run the output, a template parse error occurs. The issue seems to stem ...

angularwebpackwebpack-file-loaderwebpack-html-loader

Converting a C# Dictionary<string,string> to a TypeScript Map<string,string>

Struggling to find the best approach for handling key:value pairs in TypeScript when receiving a dictionary object from the C# backend. Everything attempted so far has not yielded the expected results. This is the C# code snippet: var displayFields = ...

c#reactjstypescript