append

import { append } from 'cx/data';

append creates a new array with items added to the end. Handles null/undefined arrays gracefully.

 <div controller={PageController}>
  <Grid
    records={m.items}
    columns={[
      { header: "ID", field: "id", align: "center" },
      { header: "Name", field: "name" },
    ]}
  />
  <div style="margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap">
    <TextField value={m.newName} placeholder="Enter name..." />
    <Button onClick="addItem">Add Item</Button>
    <Button onClick="addMultiple">Add Multiple</Button>
    <Button onClick="reset">Reset</Button>
  </div>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.set(m.items, [
      { id: 1, name: "First" },
      { id: 2, name: "Second" },
    ]);
    this.store.set(m.nextId, 3);
  }

  addItem() {
    const name = this.store.get(m.newName);
    if (!name) return;

    const id = this.store.get(m.nextId);
    this.store.update(m.items, (items) => append(items, { id, name }));
    this.store.set(m.nextId, id + 1);
    this.store.set(m.newName, "");
  }

  addMultiple() {
    const id = this.store.get(m.nextId);
    this.store.update(m.items, (items) =>
      append(items, { id, name: "Item A" }, { id: id + 1, name: "Item B" }),
    );
    this.store.set(m.nextId, id + 2);
  }

  reset() {
    this.onInit();
  }
} 
 interface Item {
  id: number;
  name: string;
}

interface Model {
  items: Item[];
  newName: string;
  nextId: number;
}

const m = createModel<Model>(); 
 import { append, createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button, Grid, TextField } from "cx/widgets"; 

ID	Name
1	First
2	Second

Signature

function append<T>(array: T[], ...items: T[]): T[]

Parameters

Parameter	Type	Description
`array`	`T[]`	The source array (can be null/undefined).
`items`	`T[]`	Items to append.

Return Value

Returns a new array with items appended. If array is null/undefined, returns the items as a new array.

Examples

Basic usage

const items = [1, 2, 3];
const result = append(items, 4, 5);
// [1, 2, 3, 4, 5]

// Original array is unchanged
console.log(items); // [1, 2, 3]

With null array

const result = append(null, 1, 2);
// [1, 2]

No items to append

const items = [1, 2, 3];
const result = append(items);
// [1, 2, 3] - returns empty array if source is null, otherwise same reference