Retrieving and merging data from an API using Angular 6

Is it possible to retrieve data from an API and gather each user's posts along with their comments in a single JSON object?

To fetch posts, you can utilize the following API: https://jsonplaceholder.typicode.com/posts

As for retrieving comments, you may want to refer to this API: https://jsonplaceholder.typicode.com/comments

//Function to Get User Posts And Comments
getUser() {
    this.http.get('https://jsonplaceholder.typicode.com/posts') && this.http.get('https://jsonplaceholder.typicode.com/comments')

    .subscribe(data => {
      this.posts = data;
    });

  }

Answer №1

utilize the forkJoin method to merge multiple requests

let request1 = this.http.get('https://jsonplaceholder.typicode.com/posts')  
let request2 = this.http.get('https://jsonplaceholder.typicode.com/comments')

forkJoin([request1, request2])
   .subscribe(response => {
      this.posts = response;
});

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

Tips for properly importing types from external dependencies in TypeScript

I am facing an issue with handling types in my project. The structure is such that I have packageA -> packageB-v1 -> packageC-v1, and I need to utilize a type declared in packageC-v1 within packageA. All the packages are custom-made TypeScript packa ...

Typescript TypeError: Unable to call function this.array[i].greet as it is not defined

When attempting to call my function, I am encountering an error. Interestingly, everything works fine when I create just one object of someClass and then utilize the greet function. This is what does not work (someArray being an array of type someClass): ...

Determine data types for functions in individual files when using ElysiaJS

Currently, I am utilizing ElysiaJS to establish an API. The code can be found in the following open-source repository here. In my setup, there are three essential files: auth.routes.ts, auth.handlers.ts, and auth.dto.ts. The routes file contains the path, ...

What is the best way to send multiple data using GetServerSideProps?

I have a challenge where I need to pass multiple sets of sanity data into a component, but I am restricted to using getServerSideProps only once. How can I work around this limitation to include more than one set of sanity data? pages > members.tsx exp ...

Is there a JSON API available in Windows that can be accessed through C programming language?

Are there any built-in ways to handle JSON in Windows using C programming? If not, is .NET or C# a better option? Alternatively, what libraries do developers typically use for incorporating JSON into Windows applications? ...

Exploring TypeScript: Navigating the static methods within a generic class

I am trying to work with an abstract class in TypeScript, which includes an enum and a method: export enum SingularPluralForm { SINGULAR, PLURAL }; export abstract class Dog { // ... } Now, I have created a subclass that extends the abstract cla ...

The Angular Material dialog fails to display content when triggered within an event listener in Google Maps

Within my project, I am utilizing Angular 6.0.6 and Angular Material 6.3.0. One issue I have encountered is with a dialog component that I have added to the entryComponents in the app module. Strangely, when I attempt to open this dialog within the rightcl ...

A step-by-step guide on reading/loading a JSON file using Typescript

I'm fairly new to Typescript and I'm attempting to parse a simple JSON file using Typescript. After searching online and testing different solutions, I still haven't been able to find a straightforward code snippet that reads a local JSON fi ...

I'm having trouble getting the [resetFilterOnHide]="true" functionality to work with primeng 5.2.7. Can anyone provide a solution for this issue?

I'm experiencing an issue with the p-dropdown component where the [resetFilterOnHide]="true" attribute isn't working as expected. When I type in the filter bar, close the dropdown by clicking outside of it, and then reopen it, the entered filter ...

Unable to inject basic service into component

Despite all my efforts, I am struggling to inject a simple service into an Angular2 component. Everything is transpiling correctly, but I keep encountering this error: EXCEPTION: TypeError: Cannot read property 'getSurveyItem' of undefined Even ...

Struggling to retrieve service information for implementation in the component

I am currently working on a project where: 1. I have created a news.service.ts service file with the following code: 2. Within the service, I have implemented a function named throwData() that returns the service data. Here is the code snippet: im ...

Adding a second interface to a Prop in Typescript React: a step-by-step guide

import { ReactNode, DetailedHTMLProps, FormHTMLAttributes } from "react"; import { FieldValues, SubmitHandler, useForm, UseFormReturn, } from "react-hook-form"; // I am looking to incorporate the DetailedHTMLProps<FormHTMLAt ...

Angular HTTP request is not defined upon first attempt

I am working with a service that includes the following HTTP request: ` login(email:any,password:any){ this.http.post<{token:string}>('http://localhost:3000/login',{payload:{email,password}},{ headers:new HttpHeaders ...

I'm encountering issues with undefined parameters in my component while using generateStaticParams in Next.js 13. What is the correct way to pass them

Hey there, I'm currently utilizing the App router from nextjs 13 along with typescript. My aim is to create dynamic pages and generate their paths using generateStaticParams(). While the generateStaticParams() function appears to be functioning corre ...

Encountering an unexpected token error while building an Angular4 --prod project that involves Three

Encountering an error while trying to build an Angular4 project in production with the following command: node --max_old_space_size=8192 'node_modules/@angular/cli/bin/ng' build --prod --output-hashing=al Error: ERROR in vendor.422622daea37e ...

Discover a component-sharing feature within Angular 2

Currently, I have a page that displays all records in a table with pagination at the bottom. I believe this pagination feature should be an independent component so it can be reused in various management panels such as UserManagement and PostManagement. T ...

What might be preventing combineLatest from executing?

Currently, I am attempting to run a block of code utilizing the combineLatest function. Within my translation library, there exists an RXJS Observable that is returned. Imported as individual functions are combineLatest, map, and tap. combineLatest(this. ...

Deleting an element from an object in TypeScript

Is there a way in TypeScript to exclude certain elements (e.g. 'id') from an object that contains them? ...

Error message: The object is not visible due to the removal of .shading in THREE.MeshPhongMaterial by three-mtl-loader

Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced: Even though I have installed &apo ...

How can I only accept one of two specific function signatures in Typescript and reject any others?

Looking for an answer from the community on Typescript, require either of two function signatures In my code, I am handling a callback where I need to either pass an error or leave the first argument as undefined and pass data as the second argument. To ...