Published
Edited
Jun 7, 2019
3 stars
{
for await(const { id, src } of delay(2, filter(map(getData())))) {
yield html`Fetched Image "${id}" by generator from Test API:<br /><img src="${src}" style="height: 100px" />`
}
}
{
for await(const { id, src } of filter(delay(2, map(asyncIterable)))) {
yield html`Fetched Image "${id}" by iterable object from Test API:<br /><img src="${src}" style="height: 100px" />`
}
}
async function * filter (iterable) {
for await (const entry of iterable) {
const num = entry.id.split(' ').pop()
if (num % 2 === 0) {
yield entry
}
}
}
async function * delay (seconds, iterable) {
for await (const value of iterable) {
await new Promise(resolve => setTimeout(resolve, seconds * 1000))
yield value
}
}
async function * map (iterable) {
for await (const { name: id, url: src } of iterable) {
yield { id, src }
}
}
function getData () {
const generator = async function * () {
const entries = await fetch(uri).then((response) => response.json()).then(({ entries }) => entries)
for (const entry of entries) {
yield entry
}
}
return generator()
}
asyncIterable = {
return {
entries: await fetch(uri).then((response) => response.json()).then(({ entries }) => entries),
[Symbol.asyncIterator]: async function * () {
for (const entry of this.entries) {
yield entry
}
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
