rx-resource-response-mapping.ts

@Component({
  template: `
    <h1>Capitals</h1>
    <ul>
      @for (capital of capitals.value(); track capital) {
         <li>{{ capital }}</li> 
      }
    </ul>
  `,
})
export class CapitalsComponent {
  readonly #http = inject(HttpClient);
  capitals = rxResource({
    loader: () =>
      this.#http
        .get<Country[]>('https://restcountries.com/v3.1/all?fields=capital')
        .pipe(
          // map the response with RxJS
          map((res) => res.map((country) => country.capital[0]))
        ),
  });
}

@Component({
  template: `
    <h1>Capitals</h1>
    <ul>
      @for (capital of capitals(); track capital) {
        <li>{{ capital }}</li>
      }
    </ul>
  `,
})
export class CapitalsComponent {
  readonly #http = inject(HttpClient);
  countries = rxResource({
    loader: () =>
      this.#http.get<Country[]>(
        'https://restcountries.com/v3.1/all?fields=capital'
      ),
  });
  // use a separate computed property
  capitals = computed(
    () => this.countries.value()?.map((country) => country.capital[0]) ?? [],
  );
}