"Combine JSON data using an observable based on the ID field

Question

"Combine JSON data using an observable based on the ID field

Consider two distinct REST services in my project:

todo.service.ts
user.service.ts

Below are the properties defining each object:

todo: userId, title, id, completed
user: id, name, email, etc

Both services return an Observable with collections conforming to these definitions.

users: Observable<User[]>
todos: Observable<Todo[]>

The desired output format looks like this:

todo.title by user.name

What would be the most optimal approach to achieve this? Should I merge them into one combined object like so:

todo: id, title, completed, user { id, name, email, etc }

Alternatively, is there a better strategy to accomplish this?

Any insights or suggestions would be greatly appreciated. Thank you!

javascript observable rxjs6

Answer 1

Answer №1

After examining your implementation, I noticed a few things that seemed off to me, so I made some changes and will explain them.

In your services, it's better to create a separate function to return the observable instead of doing it within the constructor. This allows you to delay fetching the data or refresh using the same function. Here is an example (make similar changes in other services):

@Injectable()
export class UserService {

  private API = 'https://jsonplaceholder.typicode.com/users';

  constructor(private httpClient: HttpClient) { }

  getUsers() {
    return this.httpClient.get(this.API);
  }
}

Next, in the component, create two lists that can be manually updated using a promise, or subscribed to an observable for dynamic changes.

export class AppComponent {
  name = 'Angular';
  todos:[];
  users:[];

  constructor(
    private todoService: TodoService,
    private userService: UserService
  ) {
    this.getUsers();
    this.getTodos();
  }

  getTodos() {
    // Fetch todos only once using promises
    this.todoService.getToDos().toPromise().then(todos => {
      this.todos = todos;
    });
  }

  getUsers() {
    // Fetch users only once using promises
    this.userService.getUsers().toPromise().then(users => {
      this.users = users;
    });
  }

  getUsername(id) {
    if (this.users && this.users.length > 0) {
      return this.users.find(user => {
        return user.id === id;
      }).name;
    }
  }
}

Lastly, here is the corresponding HTML code:

<h3>Users</h3>
<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

<h3>Todos</h3>
<ul>
  <li *ngFor="let todo of todos">{{ todo.title }} ({{ getUsername(todo.userId) }})</li>
</ul>

This setup results in the following output:

Users

Leanne Graham
Ervin Howell
Clementine Bauch
Patricia Lebsack
Chelsey Dietrich
Mrs. Dennis Schulist
Kurtis Weissnat
Nicholas Runolfsdottir V
Glenna Reichert
Clementina DuBuque

Todos

delectus aut autem (Leanne Graham)
quis ut nam facilis et officia qui (Leanne Graham)
fugiat veniam minus (Leanne Graham)
et porro tempora (Leanne Graham)
laboriosam mollitia et enim quasi adipisci quia provident illum (Leanne Graham)
qui ullam ratione quibusdam voluptatem quia omnis (Leanne Graham)
illo expedita consequatur quia in (Leanne Graham)

and so on.

Is mapping them to one single object the best approach?

I recommend against it because maintaining them separately allows for more flexibility - one list can change independently of the other.

Answer 2

After examining your implementation, I noticed a few things that seemed off to me, so I made some changes and will explain them.

In your services, it's better to create a separate function to return the observable instead of doing it within the constructor. This allows you to delay fetching the data or refresh using the same function. Here is an example (make similar changes in other services):

@Injectable()
export class UserService {

  private API = 'https://jsonplaceholder.typicode.com/users';

  constructor(private httpClient: HttpClient) { }

  getUsers() {
    return this.httpClient.get(this.API);
  }
}

Next, in the component, create two lists that can be manually updated using a promise, or subscribed to an observable for dynamic changes.

export class AppComponent {
  name = 'Angular';
  todos:[];
  users:[];

  constructor(
    private todoService: TodoService,
    private userService: UserService
  ) {
    this.getUsers();
    this.getTodos();
  }

  getTodos() {
    // Fetch todos only once using promises
    this.todoService.getToDos().toPromise().then(todos => {
      this.todos = todos;
    });
  }

  getUsers() {
    // Fetch users only once using promises
    this.userService.getUsers().toPromise().then(users => {
      this.users = users;
    });
  }

  getUsername(id) {
    if (this.users && this.users.length > 0) {
      return this.users.find(user => {
        return user.id === id;
      }).name;
    }
  }
}

Lastly, here is the corresponding HTML code:

<h3>Users</h3>
<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

<h3>Todos</h3>
<ul>
  <li *ngFor="let todo of todos">{{ todo.title }} ({{ getUsername(todo.userId) }})</li>
</ul>

This setup results in the following output:

Users

Leanne Graham
Ervin Howell
Clementine Bauch
Patricia Lebsack
Chelsey Dietrich
Mrs. Dennis Schulist
Kurtis Weissnat
Nicholas Runolfsdottir V
Glenna Reichert
Clementina DuBuque

Todos

delectus aut autem (Leanne Graham)
quis ut nam facilis et officia qui (Leanne Graham)
fugiat veniam minus (Leanne Graham)
et porro tempora (Leanne Graham)
laboriosam mollitia et enim quasi adipisci quia provident illum (Leanne Graham)
qui ullam ratione quibusdam voluptatem quia omnis (Leanne Graham)
illo expedita consequatur quia in (Leanne Graham)

and so on.

Is mapping them to one single object the best approach?

I recommend against it because maintaining them separately allows for more flexibility - one list can change independently of the other.

"Combine JSON data using an observable based on the ID field

Answer №1

Similar questions

Understanding the significance of "this" within node.js modules and functions

Increase numbers with uniform speed using jQuery for each number

The output display is not visible

Hiding a parent DIV in JS based on specific content: Here's how

Populating Redux form fields with data retrieved from API call

A guide to implementing Vuex in a Laravel and Vue 3 project

Embracing the node mindset with a Java foundation

What is the method for retrieving a value with a designated key?

Convert Python strings into HTML JavaScript blocks using Jinja2

Display a loading icon during the process of uploading files

Clicking on an element will remove a class and unselect an input using JQuery

Updating the label on a Highcharts speedometer gauge

Ways to execute multiple queries in ReactJS using AWS Amplify

What is the issue with this asynchronous function?

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

The error message thrown states: "Invalid function for Dispatch Action within Redux Toolkit."

Display images next to each other with no need for a scroll bar

The functionality to deselect multiple options in a select box is not functioning properly

Enhance your HTML rendering with Vue.js directives