Design, tech, engineering and science. Head of Design and User Research.
Mutable demo
mutable allUsers = ({
100000: {
id: 100000,
email: 'foo@bar.com'
},
100001: {
id: 100001,
email: 'bar@foo.fi'
}
})
page1 = fetchUsers(1) // First page has the first six users
viewof button = Inputs.button("Fetch page 2", { reduce () { fetchUsers(2) } })
page3 = fetchUsers(3) // Third page is empty, all good
fetchedUserCount = Object.keys(allUsers).length
usersByEmailDomain = {
return lodash.groupBy(allUsers, (user) => {
return user.email.substr(user.email.indexOf('@') + 1)
})
}
async function fetchUsers(page) {
// Fetch users on a particular page
const response = await axios.get(
`https://reqres.in/api/users?page=${page || 1}`
);
// Next, I want to ADD all the new users to `allUsers` object by ID
const responseUsers = response.data.data;
const responseUsersById = lodash.keyBy(responseUsers, "id");
// Note the use of the `mutable` keyword here
mutable allUsers = { ...mutable allUsers, ...responseUsersById };
// Return the IDs for this page
return responseUsers.map(({ id }) => {
return id;
});
}
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.
