Function getDatasetEntries

  • getDatasetEntries<V extends Dataset = Dataset>(
        target: null | Target,
        keys: string[],
    ): WithUndefinedValues<V>

  • Builds an object with the values associated with the dataset keys on the target. If any of the specified keys don't exist, they are set to undefined in the return value.

    Important

    You will need to perform checks for whether a value is undefined in the returned object if some of the entries weren't present. See the code block below for additional details.

    // Assuming you pass this in as the generic:
    type ShapeIn = {
      "data-label": string;
      "data-count": number;
    };

    // The return type of this function is:
    type ShapeOut = {
      "data-label": string | undefined;
      "data-count": number | undefined;
    };

    Type Parameters

    • V extends Dataset = Dataset

      Shape of value to return for the corresponding keys.

    Parameters

    • target: null | Target

      Element, EventTarget, or CSS selector.

    • keys: string[]

      Properties (e.g. someProperty) or attribute names (e.g. data-some-property) for the dataset entry.

    Returns WithUndefinedValues<V>

    Object with key of keys and corresponding dataset property values (or undefined if not present).

    Remarks

    The arcade!WithUndefinedValues type represents an object with values that could be undefined.

    Throws

    elements!InvalidElementError if the specified target wasn't found.

    Example

    HTML

    <div
      id="example"
      data-is-active="false"
      data-count="30"
      data-label="Example"
    >
      ...
    </div>

    Using Attribute Names (data-*)

    const element = findElement("#example")!;

    type AttributesShape = {
      "data-label": string | undefined;
      "data-count": number | undefined;
    };

    getDatasetEntries<AttributesShape>(element, [
      "data-label",
      "data-count",
    ]);
    // { "data-label": "Example", "data-count": 30 }

    Using Property Names (camelCase)

    const element = findElement("#example")!;

    type PropertiesShape = {
      label: string | undefined;
      count: number | undefined;
    };

    getDatasetEntries<PropertiesShape>(element, ["label", "count"]);
    // { label: "Example", count: 30 }

Settings

Member Visibility