如何使用Observable数组修改对象？附业务场景与代码示例

Hey Chris! I totally get where you're coming from—dealing with nested observables for this kind of data shaping can feel clunky if you're not using RxJS's built-in tools to streamline it. Let's refactor this into something cleaner and more maintainable.

First, let's align on the core goal:

• You have string arrays for categories and their associated thing names
• You need to turn these into an array of Category objects, where each Category has a things property populated with Thing instances fetched via ThingService.getThing() (which returns an Observable)

Here's a streamlined approach using RxJS operators: #

First, let's define our types for clarity (you probably already have these, but it helps set the stage):

interface Category {
  name: string;
  things: Thing[];
}

interface Thing {
  // Your Thing properties go here
}

class ThingService {
  getThing(name: string): Rx.Observable<Thing> {
    // Existing implementation that returns an Observable of Thing
  }
}

Now, let's cover two common data structure scenarios for your categories and things:

Case 1: Using a Map for category-to-things mapping (cleanest if your data allows it)

import { from, forkJoin, concatMap, map, toArray } from 'rxjs';

// Set up your category-to-thing-names mapping
const categoryThingMap = new Map<string, string[]>([
  ['Electronics', ['Smartphone', 'Laptop']],
  ['Home Goods', ['Blender', 'Throw Pillow']]
]);

const thingService = new ThingService();

// Build our final Category array Observable
const finalCategories$ = from(Array.from(categoryThingMap.entries())).pipe(
  // Process each category one by one (use mergeMap for parallel processing)
  concatMap(([categoryName, thingNames]) => {
    // Convert each thing name into its corresponding Observable
    const thingObservables = thingNames.map(name => thingService.getThing(name));
    // Wait for all things in the category to load, then map to a Category object
    return forkJoin(thingObservables).pipe(
      map(things => ({ name: categoryName, things }))
    );
  }),
  // Collect all processed categories into a single array
  toArray()
);

// Subscribe to get your final result
finalCategories$.subscribe({
  next: (categories) => console.log('Ready-to-use categories:', categories),
  error: (err) => console.error('Oops, something went wrong:', err)
});

Case 2: Using paired arrays (if your data is structured as separate category and thing arrays)

If your data is two separate arrays where the index of each category matches its thing names array, adjust like this:

const categoryNames = ['Electronics', 'Home Goods'];
const thingNamesArrays = [['Smartphone', 'Laptop'], ['Blender', 'Throw Pillow']];

const finalCategories$ = from(categoryNames).pipe(
  concatMap((categoryName, index) => {
    const thingNames = thingNamesArrays[index];
    const thingObservables = thingNames.map(name => thingService.getThing(name));
    return forkJoin(thingObservables).pipe(
      map(things => ({ name: categoryName, things }))
    );
  }),
  toArray()
);

Why this is better than your current approach: #

• No nested subscriptions: We use higher-order operators like concatMap to flatten the observable chain, avoiding callback hell.
• Declarative flow: The code reads like a step-by-step process, making it easier to follow and modify later.
• Built-in async handling: forkJoin takes care of waiting for all thing requests in a category to complete, so you don't have to manually track completions.
• Flexible execution: Swap concatMap for mergeMap if you want to load all categories' things in parallel instead of sequentially—just one line change!

This approach keeps your code concise, leverages RxJS's strengths, and aligns with reactive programming best practices.

内容的提问来源于stack exchange，提问作者Chris Farmer