👋,

​

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?

Ran Segall @ransegall An Ai coding companion for Webflow. Slater is a new tool for designers who don't write code. Have you tried it yet? 6:0 AM • Mar 28, 2024 1 Retweets 69 Likes Read 3 replies

​

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

cards.push(card);

});

​

// Now you have an array of card objects!

console.log(cards);

```

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​

​