Inventory Object Array

inventory: {'An apple': {name:"Granny Smith", number:1, colour:"lime"}, "A banana": {name:"Yellow Banana", number:1, colour:"yellow"}} -- {embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Jacob_van_Hulsdonck_%28Flemish_-_Still_Life_with_Lemons%2C_Oranges_and_a_Pomegranate_-_Google_Art_Project.jpg/705px-Jacob_van_Hulsdonck_%28Flemish_-_Still_Life_with_Lemons%2C_Oranges_and_a_Pomegranate_-_Google_Art_Project.jpg"} # A Fruit Bowl Inventory This example uses a single Javascript object as an inventory within [[Twine (Chapbook)->https://klembot.github.io/chapbook/guide/]]. __What do I mean by inventory?__ By inventory I mean data that is saved, and can be changed. I am going to use a fruit bowl analogy but it could have been a backpack, or a complex score and ranking {life:27, speed:55 etc}, or whatever you want to persist. In order to understand this you need to understand how to use the Javascript data structures of [[Javascript Object->https://www.w3schools.com/js/js_objects.asp]] and it differs from the Javascript [[Array->https://www.w3schools.com/js/js_arrays.asp]] (or list). _Note - Don't get confused with an Array of Objects which are also a valid way of storing data_ ## A Mini Guide To Javascript Objects * An object is surrounded in {} an Array is surrounded in [] * Each item in the object has a unique key or name * Each item's key can be anything, but is usually a string * Interestingly, the name doesn't have to have quotes around it * Each item's value comes after a : * Items are comma separated * The items are not in order, so even if you add an apple first, then an orange, you can't ask the object what its last item is ## Using Objects As An Inventory On this page, at the top, I have already added some fruit to your inventory. You need to initialise (or create) an object before you can start working with it. The code looks like this … ` inventory: {'An apple': {name:"Granny Smith", number:1, colour:"lime"}, "A banana": {name:"Yellow Banana", number:1, colour:"yellow"}} ` Each item in the inventory object has extra variables stored in it that are themselves named. And these variables can be text (strings), numbers, lists or even other objects. Often you would simply create an empty object like this... `myInventory:{} ` ## For example So, for example the first item has a key of __"apple"__ and extra variables in it like this... `{'apple': {name:"Granny Smith", number:1, colour:"lime"}` # Go take a look at... [[Your Inventory]] ... I have to use Javascript to display the object because it quite complex - there are things contained within things - so to speak. No go and add some strawberries, and cherries. Once you have done that THEN go on further to look at the Advanced Inventory. It doesn't do anything except display what's in the inventory with a little more sophistication.

# Let's See Your Inventory [Javascript] var inventory = engine.state.get('inventory'); for (i in inventory){ write([i] + " - " + inventory[i].name + " "); } [continued] Let's add some [[Strawberries]] or some [[Cherries]] ## Note Because Objects each need a unique key, if you add an "apple" then add another "apple", you will never get two apples.

# Yay! You have added some strawberries to your inventory... [Javascript] var inventory = engine.state.get('inventory'); inventory['strawberries'] = {name:"A Punnet of Strawberries!", number:9, colour:"red"} for (i in inventory){ write([i] + " - " + inventory[i].name + " "); } [continued] ... now go back to [[Your Inventory]] ...or go on to the [[Advanced Inventory]]

# A Lovely bag of cherries [Javascript] var inventory = engine.state.get('inventory'); inventory['cherries'] = {name:"Lovely bag of cherries!", number:14, colour:"purple"} for (i in inventory){ write([i] + " - " + inventory[i].name + " "); } [continued] You have added a lovely bag of cherries. ...or go on to the [[Advanced Inventory]]

# Advanced Inventory See here how I have used the number of each fruit in my inventory to generate a HTML P tag, with colour styling. [Javascript] var inventory = engine.state.get('inventory'); for (i in inventory){ var num = inventory[i].number ; for (n=0; n<num; n++){ write('') write( inventory[i].name ); write("") } } [continued] [[What's Next?]]

# What's Next? So because we are using an Object, rather than a simple Array to store our data, we can do more sophisticated things more easily. For example, what if some bounder came and ate all but one of our cherries. The rogue might even spit the pits into our fruit bowl. [Javascript] var inventory = engine.state.get('inventory'); var numberOfCherries = inventory['cherries'].number; var numToEat = numberOfCherries -1; inventory['cherries'].number = 1; inventory['pits'] = {name:"Cherry pit", number:numToEat, colour:"brown"} [continued] Now take a look at the [[Eaten Cherries]]

# The Rotter! So, we should have five different fruits in our object, and each has a number, a colour and a name. [Javascript] var inventory = engine.state.get('inventory'); for (i in inventory){ var num = inventory[i].number ; for (n=0; n<num; n++){ write('') write( inventory[i].name ); write("") } } [continued]