reactiveweb
    Preparing search index...

    Interface MappedArray<Elements, MappedTo>

    Public API of the return value of the [[map]] utility.

    interface MappedArray<Elements extends readonly unknown[], MappedTo> {
        length: number;
        values: () => { [K in string | number | symbol]: MappedTo };
        "[iterator]"(): Iterator<MappedTo>;
        [index: number]: MappedTo;
    }

    Type Parameters

    • Elements extends readonly unknown[]
    • MappedTo

    Indexable

    • [index: number]: MappedTo

      Array-index access to specific mapped data.

      If the map function hasn't ran yet on the source data, it will be ran, an cached for subsequent accesses.

       class Foo {
      myMappedData = map(this, {
      data: () => [1, 2, 3],
      map: (num) => `hi, ${num}!`
      });

      get first() {
      return this.myMappedData[0];
      }
      }
    Index

    Properties

    Methods

    Properties

    length: number

    Without evaluating the map function on each element, provide the total number of elements

     class Foo {
    myMappedData = map(this, {
    data: () => [1, 2, 3],
    map: (num) => `hi, ${num}!`
    });

    get numItems() {
    return this.myMappedData.length;
    }
    }
    values: () => { [K in string | number | symbol]: MappedTo }

    evaluate and return an array of all mapped items.

    This is useful when you need to do other Array-like operations on the mapped data, such as filter, or find

     class Foo {
    myMappedData = map(this, {
    data: () => [1, 2, 3],
    map: (num) => `hi, ${num}!`
    });

    get everything() {
    return this.myMappedData.values();
    }
    }

    Methods

    • Iterate over the mapped array, lazily invoking the passed map function that was passed to [[map]].

      This will always return previously mapped records without re-evaluating the map function, so the default {{#each}} behavior in ember will be optimized on "object-identity". e.g.:

       // ...
      myMappedData = map(this, {
      data: () => [1, 2, 3],
      map: (num) => `hi, ${num}!`
      });
      // ...
       {{#each this.myMappedData as |datum|}}
          loop body only invoked for changed entries
          {{datum}}
       {{/each}}
      

      Iteration in javascript is also provided by this iterator

       class Foo {
      myMappedData = map(this, {
      data: () => [1, 2, 3],
      map: (num) => `hi, ${num}!`
      });

      get mapAgain() {
      let results = [];

      for (let datum of this.myMappedData) {
      results.push(datum);
      }

      return datum;
      }
      }

      Returns Iterator<MappedTo>