Retrieve content from my Tumblr API posts

Looking to retrieve my tumblr posts through an api.

Successfully set up the api key using Angular2 and typescript.

Utilizing jsonp to avoid any cross origin problems.

Here is my current code snippet:

  var config = {
    params: {
      action: "query",
      prop: "revisions",
      format: "json",
      callback: "JSON_CALLBACK"
    }
  }

  var url = "https://api.tumblr.com/v2/blog/thepoolcover.tumblr.com/posts?api_key=lqoK2G4BT9X8xnewyW0l45ky4aTKWTqQ3PzF14gefIglpIRnBz";

  this.jsonp.request(url, config).subscribe(response => {

      console.log(response);

  }); 

No typescript compiler error, but encountering a console error in the browser:

https://i.sstatic.net/XJc0q.png

Answer №1

For optimal performance, it is recommended to utilize JSONP_CALLBACK as the callback name instead of JSON_CALLBACK, along with URLSearchParams for handling query parameters:

URLSearchParams searchParams = new URLSearchParams();
searchParams.set('action', 'query');
searchParams.set('prop', 'revisions');
searchParams.set('format', 'json');
searchParams.set('callback', 'JSONP_CALLBACK');

var configuration = {
  search: searchParams
};

var apiUrl = "https://api.tumblr.com/v2/blog/thepoolcover.tumblr.com/posts?api_key=lqoK2G4BT9X8xnewyW0l45ky4aTKWTqQ3PzF14gefIglpIRnBz";

jsonp.request(apiUrl, configuration).subscribe(response => {
  console.log(response);
}); 

Check out the accompanying plunkr example:

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

Is there a way to automatically update the button text based on the route name without requiring user interaction?

I need to dynamically change the text on a button in my header based on the current route. When on the login page, the button should say "Signup" and when on the signup page, it should say "Login". I want this text change to happen without having to click ...

Is there a method to enable the acceptance of both dots and commas as decimal markers in input fields?

Hey there! I have a question for you. Is there a way to allow users to input both commas and dots as decimal markers, but still display the value with dots and remove thousand separators? For example, when a user inputs "123456,78", they should see "123 ...

The data type 'Event' cannot be assigned to the data type 'string' in this context

Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...

Seasonal selection tool

I need a quarterly date picker feature, ideally using Angular. I am interested in something similar to the example shown below: https://i.stack.imgur.com/9i0Cl.png It appears that neither Bootstrap nor (Angular) Material have this capability. Are there a ...

Angular 14 Observables are not triggering resize events

There seems to be an issue here, as the code is not being triggered at all. The console log is not printing and this.width is not changing. constructor(private host: ElementRef, private zone: NgZone) {} public ngOnInit(): void { this.observer = new Re ...

What is the most efficient way to apply multiple combinations for filtering the information within a table?

I'm facing an issue with my Angular project. I have 4 select boxes that allow users to apply different filters: office worker project name employee activities The problem I'm encountering is the difficulty in predicting all possible combination ...

How to effectively handle null in Typescript when accessing types with index signatures unsafely

Why am I getting an error that test might be potentially undefined even though I've enabled strictNullCheck in my tsconfig.json file? (I'm unsure of the keys beforehand) const a: Record<string, {value: string}> = {} a["test"].va ...

Angular 4 - Unexpected path match failure triggered by route query parameters

After scouring through multiple discussions and questions regarding the different routing options in Angular 4, I have been unable to resolve an issue related to passing queryParams to an Angular 4 route. Whether passing them into the URL like this http: ...

Exploring the nuances between Angular and Svelte in change detection mechanisms

In my daily work, I rely on Angular but also am taking the time to learn Svelte. As far as I know, neither Angular nor Svelte utilize a virtual dom and diffing process for change detection. Instead, they both have their own mechanisms for detecting chang ...

Using either prop type for a React component in Typescript

Looking to build a Table component that can either render data from a prop or accept custom rendering via children. In order to achieve this, I need a type that can handle both scenarios with either data or children. I've come across some solutions a ...

Enhance Tuple in Angular Component Properties

When using React, state variables can be created like this: const SomeComponent = ({ someProp }) => { const [value, setValue] = useState<boolean>(false); } I wonder if there is a similar way to achieve the spread of a tuple within an Angular co ...

Utilizing ngmodel to dynamically populate select dropdowns in Angular version 8

In the form, there are two dropdown menus for selecting start time and end time. The first dropdown menu uses a time array to select a time, and then the index of this selected time is used to create an array for the second dropdown menu. This ensures that ...

How to extract a string value from an observable array in Angular2 NativeScript?

I inserted JSON data into an observable array. My goal is to extract only the address from ShowData, specifically as a string value based on its position. ShowData.ts: class ShowData{ constructor(public id:number, public name:string, public address:s ...

Establish a permanent code folding feature in the Monaco editor for enhanced text organization

I need help implementing persistent code folding on the Monaco editor. Specifically, I am unsure about: how to extract the view state when it changes; storing it in localstorage; and then restoring it when Monaco is loaded. Although I am aware of saveVie ...

Developing the latest version of ngx-charts

I'm currently working on adding a personalized feature to ngx-charts that I would like to include in a release version. I was successful in implementing it using the standard src directory, but now I want to build a release version for potential distr ...

The intricacies of Mongoose schemas and virtual fields

I'm currently working on a NodeJS project using TypeScript along with Mongoose. However, I encountered an issue when trying to add a virtual field to my schema as per the recommendations in Mongoose's documentation. The error message stated that ...

React's Material-UI ToggleButtonGroup offers a seamless way

I'm having trouble getting the ToggleButton selected property from material ui to function properly with ToggleButton. I followed the Material Ui documentation and created a StyledToggleButton as shown below: const StyledToggleButton = withStyles({ ...

Difficulty accessing files with Angular deployment in Nginx through Docker

Recently, I delved into the world of Docker and Nginx in an attempt to deploy my angular application. Unfortunately, I encountered a perplexing issue. Upon executing the command: npm run build, I noticed that my index.html contained script references as f ...

Tips for transmitting static information from route configuration to components

I am facing an issue with passing static data from a route to a component in Angular. Despite trying to pass the data in the route configuration, I keep receiving empty data when subscribing to it from the ActivatedRoute. Below is the code snippet that I h ...

What causes interface to generate TS2345 error, while type does not?

In the code below: type FooType = { foo: string } function fooType(a: FooType & Partial<Record<string, string>>) { } function barType(a: FooType) { fooType(a) } interface FooInterface { foo: string } function fooInterface(a: FooInt ...