into, into-mode and into-key
Write a successful response's data into state. data is the parsed JSON when the response is JSON, otherwise the text.
<button fetch="/api/items" into="#list.items">Load</button>
<form fetch="/api/items" method="post" into="#list.items" into-mode="append">…</form>
<button fetch="/api/items/3" method="delete" into="#list.items" into-mode="remove">Delete</button>Attributes
| Attribute | Type | Default | Meaning |
|---|---|---|---|
into |
writable reference | none | Where to write. Needs at least one property (#list.items), cannot be a prop or negated |
into-mode |
replace, append, prepend, update, remove |
replace |
How data is combined with the current value |
into-key |
property name | id |
Identity property for update and remove |
into is applied before render and before the load event. It is not applied for non-2xx responses.
Modes
For every mode except replace, the current value is treated as a list ([] if it is not an array) and data as a list of items (a single value becomes one item).
| Mode | New value |
|---|---|
replace |
data |
append |
current items, then the new items |
prepend |
the new items, then current items |
update |
Each current item whose into-key matches a new item is replaced by it, in place. New items with no match are appended |
remove |
Current items whose into-key matches a new item are removed |
An unknown into-mode behaves like append. The write replaces the array, so a key on the list keeps unchanged rows.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>into, into-mode and into-key demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="./first-pages.html"></import-element>
<first-pages></first-pages>
</body>
</html><custom-element name="first-pages">
<script>
const list = useState({ pages: [] });
const view = useState({
get count() {
return list.pages.length;
},
});
</script>
<style>
:host {
display: grid;
gap: calc(var(--spacing) * 2);
justify-items: start;
}
div {
display: flex;
gap: calc(var(--spacing) * 2);
}
</style>
<div>
<ui-button fetch="http://realm.js.org/search-index.json" into="#list.pages">Replace</ui-button>
<ui-button variant="outline" fetch="http://realm.js.org/search-index.json" into="#list.pages" into-mode="append">Append</ui-button>
<ui-button variant="outline" fetch="http://realm.js.org/search-index.json" into="#list.pages" into-mode="update" into-key="url">Update by url</ui-button>
</div>
<p><slot name="#view.count"></slot> items in the list</p>
</custom-element>"Append" doubles the list each time. "Update by url" replaces matching pages in place, so the count stays the same.