Welcome To Slater!

Do you know how to create an array of objects? ๐Ÿค”

Published 25 days agoย โ€ขย 2 min read



We are big fans of Ran and the giant role he plays in the #nocode space. Pleased to see that he uses Slater!

Have you tried out his courses?

Are you using the Library tab?

What code snippets are you saving?

Would you like any improvements?

Javascript 101: Arrays of Objects

We had issues with Finsweet's CMS Load so this week we've been considering implementing our own load more solution. To do this, we need to create an array of objects. Do you know what an array of objects is? Do you know how to create one? Let's discuss.

To start, an object in JavaScript is like a container that holds different pieces of information, called properties. For example, you can have an object representing a person, with properties like name, age, and city.

An array is like a list of items. Instead of just one object, you can have many objects stored in an array.

Now, let's say you have a bunch of HTML elements on a web page, like cards or list items, and you want to create an array of objects from them. This way, you can easily access and manipulate the data from those elements using JavaScript.

Here's an example of how you could do that:


// Select all the HTML elements you want to create objects from

const htmlElements = document.querySelectorAll('.card');


// Create an empty array to store the objects

const cards = [];


// Loop through each HTML element

htmlElements.forEach((element) => {

// Create an object for this element

const card = {

title: element.querySelector('h2').textContent,

description: element.querySelector('p').textContent,

imageUrl: element.querySelector('img').src


// Add the object to the cards array




// Now you have an array of card objects!



In this example, we're selecting all the HTML elements with the class 'card'. Then, we create an empty array called cards.

Next, we loop through each HTML element using forEach. For each element, we create an object with properties like title, description, and imageUrl. We get the values for these properties from the HTML element itself (e.g., the text content of an h2 tag, or the src attribute of an img tag).

Finally, we add (or "push") this object to the cards array.

After the loop finishes, we have an array called cards that contains all the card objects we created from the HTML elements. We can then use this array of objects to manipulate the cards on the page. For example, if the user were to select a value from a filter, we could show only those cards that relate to the filter selection.

Do you see how we can use an array of objects to get similar functionality as CMS Load?

Happy coding!


๐Ÿค™ The Slater team


๐Ÿ™ If Slater helps you create better websites, please support the team behind it.

1295 Canyon View Rd, Midway, UT 84049
โ€‹Unsubscribe ยท Preferencesโ€‹


Welcome To Slater!

Sign up for early access and weekly resources in your inbox

Slater resources, updates and community activity

Read more from Welcome To Slater!

๐Ÿ‘‹, We were excited to be invited to Webflow's livestream, Add AI to your Webflow builds with these Webflow apps. It did not go as planned. ๐Ÿคฆโ™‚๏ธ Aron's project was deleted prior to the demo but also open in another tab. Although it appeared to still be functioning properly, the project files were inaccessible. You can see the breakdown here. (Get a free month subscription using the code "wipeout".) ๐Ÿ‘€ We are working on several tasks based on feedback from users like you. The minification of your...

3 days agoย โ€ขย 2 min read

๐Ÿ‘‹, The idea of a community library has been part of Slater's vision from the start, but it took a couple of tries to get it right. The code is now written and we have moved our focus to populating the library with useful scripts. If you have a valuable script to contribute, please add it to your personal library and document it with Slater Documentation. We will review your scripts and reach out if your script is something we want to include. ๐Ÿ‘€ You have probably head about Devin, the first AI...

11 days agoย โ€ขย 2 min read

๐Ÿ‘‹, We pushed up a handful of updates yesterday. Quality of life improvements, bug fixes, and more Slater scripts! Slater still works the same, but now you have more flexibility in how your JavaScript is loaded in your Webflow project. If the Slater Single Script is working for you, feel free to skip the details. The details: Slater has two types of projects, connected and unconnected, and manages two environments, staging and production. Sometimes you may need more control over the timing or...

about 1 month agoย โ€ขย 2 min read
Share this post