Objective

Given an array holding grocery items, create an HTML <ol> list using it.

Difficulty

Easy

Description

Programmers love programming, isn't that so? One programmer has particularly written a list of grocery items in an array.

Here's that array:

var items = [
   'Oranges',
   'Oregano',
   'Mozzarella cheese',
   'Milk',
   'Detergent powder'
];

Your job is to take this array and write some additional code to print out an HTML <ol> list using its elements.

Note that you must NOT use a for or while loop, but rather accomplish this task solely using array methods. For the output, you should use document.write().

Here's the expected output:

  1. Oranges
  2. Oregano
  3. Mozzarella cheese
  4. Milk
  5. Detergent powder

Hints

Hint 1

Use the map() method to map each element in the array to an <li> element.

Hint 2

Use the join() method to join the elements in the mapped array.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-26-Grocery-List and put the .html solution files for this exercise within it.

Solution

So we have a list of items stored in the form of an array. If we want an <ol> list, each item has to be represented by an <li> element.

Hence, this means that we could map each item of the array, using the map() method, to a string comprised of the '<li>' and '</li>' strings and between them the name of the item. The mapping function would simply concatenate the given strings together.

Next we ought to join each of the items in the resulting (mapped) array, using the join() method, with an empty string ('') as the separator since we don't want anything between the <li> elements.

Once joined, the whole array of items becomes effectively transformed into a string of <li> elements. The last thing is to encapsulate this string between the <ol> tags. This could very simply be done using some basic string concatenation.

Altogether, we get to the following code:

var items = [
   'Oranges',
   'Oregano',
   'Mozzarella cheese',
   'Milk',
   'Detergent powder'
];

function toListItemElement(item) {
   return `<li>${item}</li>`;
}

document.write('<ol>' + items.map(toListItemElement).join('') + '</ol>');

The toListItemElement() function is called for each element in the items array and the return value added to the mapped array, which is ultimately returned by the call to items.map() in the last line.

For example, 'Oranges' becomes '<li>Oranges</li>', 'Detergent powder' becomes '<li>Detergent powder</li>', and so on.

The resulting mapped array (i.e. the expression items.map(toListItemElement)) is joined via join('') and then the resulting string is placed between the <ol> tags.

And that's it.

Remember that both map() and join() are not one of those array methods that programmers would use very rarely — instead they are extremely handy, and thereby frequently used in programs.

Many other programming languages provide similar functionality for whatever data type they use to implement arrays.