CODEWITHSUNDEEP
javascriptarraystypescriptobservablereactive
user3066027
user3066027

Reputation: 327

Transformation of Observable

I've a data structure which looks like this: 

 Observable<Array<LineChart>>

whereby an LineChart is defined like 

export interface LineChart  {
  name?: null | string;
  series?: null | Array<DateLineChartEntry>;
}

and an DateLineChartEntry is defined like this:

export interface DateLineChartEntry  {
  name?: string;
  value?: number;
}

where name is string, which contains Date.

For my follow-up operation with this DataStructure i need to convert the DateLineChartEntry to sth. like this: 

export interface DateLineChartEntryConverted  {
  name?: Date;
  value?: number;
}

which means, i've to map all DateLineChartEntries like this

DateLineChartEntry  => {
name: new Date(name),
value: value
}

My current solutions looks like that:

    this.data = getObservable({ body: parameters }).pipe(
  map(lca => {
    var lcaConverted = [];

    for (var lc of lca) {
      var name = lc.name
      var lcN = {
        name: name,
        series: []
      };

      for (var e of lc.series) {
        var n = new Date(e.name);
        lcN.series.push({
          name: n,
          value: e.value
        });
      }

      lcaConverted.push(lcN);
    }

    return lcaConverted;
  })
);

Which is pretty ugly and I'm looking for a "nicer" solution to this.

Is there an easy way available to do this by using the initial Observable (and receiving an Observable as output)?

Thanks in advance for your help.

Upvotes: 1

Views: 40

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

Are you just looking for something a little cleaner? If so look into some of the newer array features instead of writing for:

this.data = getObservable({
        body: parameters
    }).pipe(
        map(lca => lca.map(entry => ({
                    name: entry.name,
                    series: entry.series.map(x => ({
                        name: new Date(x.name),
                        value: x.value
                    }))
                }))
            )
        );

Specifically .map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Upvotes: 1

Related Questions