Iterating Arrays with Object.keys() and map()

A simple image gallery in JS

November 21, 2017

By using the Object.keys() method, and the map() array iteration method, we can build a simple image gallery that builds itself whenever you call the page.

The information related to the images is stored in an object of objects (a large object called "photos" containing several objects: the images themselves). Then, with the Object.keys() method we will grab all the keys in the "photos" object and store them as strings in an array. We can then use these keys in bracket notation to access the properties of each image object and build the gallery.

Here is the main "photos" object:


    var photos = {
      ruby: {
          desc: 'Wyncode Workshop',
          image: 'http://68.media.tumblr.com/d93b8a4f6509ca49f26359464381063c/tumblr_ourbmw8Fw91qz7ur9o1_1280.jpg',
      },

      ubuntu: {
          desc: 'Ubuntu Setup',
          image: 'https://68.media.tumblr.com/a3b53c16f75cd9912bbfa2fa77312df9/tumblr_oqqkduUrGA1qz7ur9o1_540.jpg',
      },

      wordcamp: {
          desc: 'Wordcamp Miami',
          image: 'https://68.media.tumblr.com/df1c1a84a06bc5bd536324365796c421/tumblr_oqqkduUrGA1qz7ur9o2_540.jpg',
      },

      webdev: {
         desc: 'Webdev Class',
         image: 'http://68.media.tumblr.com/44135b2999959d30ee7ddb8196d01ab0/tumblr_oie5odPDhZ1qz7ur9o1_540.jpg',
      },

      homecomp: {
         desc: 'Coding at Home',
         image: 'http://66.media.tumblr.com/4a096d78507ad9616c947ff35e449b17/tumblr_obza4vDzSq1qz7ur9o2_540.jpg',
      },

      google: {
         desc: 'Google Analytics',
         image: 'https://66.media.tumblr.com/048db88744dcc7f30127ae3ccae3ce66/tumblr_obzbaq5C0Z1qz7ur9o1_540.jpg', 
      }

    }


This is how we will call the Object.keys() method and store the object keys in an array of strings:


var listPix = Object.keys(photos); // This generates the following array: ['ruby', 'ubuntu', 'wordcamp', 'webdev', 'homecomp', 'google']


This is how we build the gallery:

var grid = '';
listPix.map(key => grid += '<div class="picbox"><figure><img src=' + photos[key].image + ' class="profile medium"><figcaption>' + photos[key].desc + '</figcaption></figure></div>');


You can see a [Live Demo]. Also, the [Source code] is in Github.


tech


Coding a Tic Tac Toe Game with Pure JavaScript Main Stock Quote App with jQuery


USA 2017Stack: Ubuntu > Metalsmith > Git > VPS