在Typescript / Angular中将数组映射到对象

Question

I have a service that is querying a backend API. The API returns a set of comma delimited lines of text. These columns correspond to the attributes in a TypeScript class that I've created. The class is:

export class TopTalker {
    constructor(
        public source: string,
        public protocol: number,
        public packets: number,
        public _percent: string,
        public _tally: string
    ) {}
}

I am currently building objects out of these like so:

  getTopTalkers() {
    this._silk.topTalkers().subscribe(
        data => {
        let results = <any>[];
        results = data;
        this.topTalkers = <any>[];
        for (let row of results) {
          let thisTalker = row.split(/,/);
          let a = new TopTalker(
            thisTalker[0],
            thisTalker[1],
            thisTalker[2],
            thisTalker[3],
            thisTalker[4]);
          if(thisTalker.length > 1){   // Was getting a blank line
            this.topTalkers.push(a);
          }
        }
      console.log(this.largestTransfers);
      },
        err => console.error(err),
        () => console.log('Processed talkers')
        );
  }

Here is an example of the data returned by the API:

["8.248.215.242,6,7037358,53.111350,53.111350","8.248.209.245,6,2459465,18.561725,71.673076","192.168.2.86,6,604136,4.559450,76.232525","192.168.2.43,6,295422,2.229567,78.462092","192.168.2.39,6,254746,1.922583,80.384675","8.248.211.241,6,182544,1.377670,81.762345","192.168.2.69,6,180162,1.359693,83.122038","8.250.125.246,6,152862,1.153658,84.275697","8.248.213.243,6,93544,0.705982,84.981679","167.206.10.209,6,69862,0.527253,85.508931",""]

This works, but it feels really wrong. Is there some feature of Angular or TypeScript that I am missing that would allow me to map each line to create an array of objects directly?

Answer 1

If I understand your code correctly, something like this should be pretty close to what you're after (and is a lot easier to read, imo)

getTopTalkers() {
  this._silk.topTalkers().subscribe(
    results => {
      this.topTalkers = results.map((row, index, rows) => {
        let thisTalker = row.split(/,/);

        // Avoid blank lines by checking length
        if (thisTalker.length > 1) {
          new TopTalker(
            thisTalker[0],
            thisTalker[1],
            thisTalker[2],
            thisTalker[3],
            thisTalker[4]
          );
        }
      })
    },
    err => console.error(err),
    () => console.log('Processed talkers')
  );
}

Ideally, I'd explore getting that service updated to not return grotesque comma-separated strings.

Answer 2

You could simplify your constructor signature a little bit by moving the mapping work into the body, like so:

class TopTalker {

    public source: string;
    public protocol: number;
    public packets: number;
    public _percent: string;
    public _tally: string;

    constructor(sourceRow: string[]) { 
        this.source = sourceRow[0];
        this.protocol = parseInt(sourceRow[1]);
        this.packets = parseInt(sourceRow[2]);
        this._percent = sourceRow[3];
        this._tally = sourceRow[4];
    }
}

Which would remove some of the complexity from the instantiating code:

for (let row of results) {
      let thisTalker = row.split(/,/);
      let a = new TopTalker(thisTalker);
      this.topTalkers.push(a);        
}