Advanced- Arrays and Key Maps- Tutorial

how to use liquid for loops and indexing to handle arrays also, how to use a key to access key maps, using categories as an example prerequisites this article is the second in a series on using dot notation in siteglide we strongly recommend reading the article below first getting started with dot notation introduction if you're using dot notation, you'll probably come across arrays and maps the syntax for dealing with them is slightly different, but this actually makes them more powerful when you're building complex layouts the examples below focus mainly on categories because they are a good example of arrays and maps arrays an array is a group or list of data a key might have a single value, or an array of values in siteglide for example, each webapp item for example has a field called category array which stores a list of the ids of every category assigned to that item the more categories an item belongs to, the longer the array e g { "category array" \["98479", "111111"] } if you try to use standard dot notation as we practised in the previous article, you will be able to output the array as it is using the key category array and the liquid {{this category array}} \["98479", "111111"] however, there aren't many places where this would actually be helpful it would probably be more useful to do one of the following access one of the array items by its index loop over the array items find the length of the array (how many items are there?) accessing an array by its index arrays have an index, which means they are numbered in siteglide (and in javascript) arrays are zero indexed, meaning the first item has the index of 0 while the second item has the index of 1 we can access the first value in the category array by its index using the following liquid {{this category array\[0]}} outputs 98479 note that straight after the key, we give the index number of the value we want in square brackets if the array contained objects, you could go a step further and access one of their properties with a dot after the square brackets looping the array to access all values in it we can access all values in the array using a liquid for loop {% for item in this category array %} {{item}} {% endfor %} this outputs 98479 111111 finding the length of an array you can find the length of an array using a liquid filter {{this category array | size}} outputs 2 maps as well as arrays, you might come across a map of data here is an example which can be tried on any siteglide starter site using the liquid {{context exports categories}} it outputs something like this (but i've shortened it here!) {"items" { "98490" {"id" "98490" "external id" "category 57703" "name" "women" "parent" "98487" "slug" "women" "image"\ null "description"\ null "meta title" "women" "meta desc"\ null "og title"\ null "og desc"\ null "og type"\ null "twitter type"\ null "full slug" "/our products/merch/clothes/women"}, "98489" {"id" "98489" "external id" "category 57701" "name" "men" "parent" "98487" "slug" "men" "image"\ null "description"\ null "meta title" "men" "meta desc"\ null "og title"\ null "og desc"\ null "og type"\ null "twitter type"\ null "full slug" "/our products/merch/clothes/men"} } } a map is used to store data when you know the id of an item and want to fetch it using it's id as a key in siteglide we use them for performance reasons you can tell this is a map, because the key items contains several comma separated objects instead of a single value each of these has a key representing an id, instead of the name of a property let's say you have the id of a category, but you want to display the category's name {{context exports categories items\["98490"] name}} this outputs women this sounds odd, but it's the name of the ecommerce category we wanted! you can achieve the same if you have the id stored as a variable {% assign my example category id = 98490 %} {{context exports categories items\[my example category id] name}} looping over a map you can loop over all keys in a key map using a liquid for loop inside the loop, each key value pair is treated as an array with the key being the first item in the array and the value being the second and last value in the array in this example, we'll loop over all categories in context exports categories data and see what data is available to output {% for item in context exports categories data %} {{item\[0]}} {{item\[1]}} {{item\[1] name}} {% endfor %} using what you've learned so far here's a challenge you can try can you create a webapp with categories and in your layout output a list of the category names that belong to the item? step 1) create a webapp and assign more than one category to each of the items step 2) in the layout, access the this object step 3) use your understanding of arrays to loop through every category belonging to the item step 4) use your understanding of maps to find the name of each category in the loop and output it next article next, we'll look at how you can use dot notation to work with webapp collections using webapp collections