{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-17-html-list-using-template-strings/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"40e0eab7-ff7f-5687-a682-31c45ada8117","html":"

Problem

\n

You want to create an HTML list based on an array of objects.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array of objects …

    \n
    const persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter'\n  }\n]
    \n

    … and you want to create a function htmlList() that takes this array …

    \n
    let result = htmlList(person);
    \n

    … and creates the following HTML code:

    \n
    <ul>\n  <li>John Doe</li>\n  <li>Jane Doe</li>\n  <li>Jane Smith</li>\n  <li>Dave Smith</li>\n  <li>Jane Carpenter</li>\n</ul>
    \n
    2. \n
  2. \n

    Create a function htmlList() that accepts an array and returns a template string.

    \n
    const htmlList = array => ``
    \n
    3. \n
  3. \n

    Add the HTML code for the list to the template string.

    \n
    const htmlList = array => `<ul></ul>`
    \n
    4. \n
  4. \n

    Add an embedded expression between the <ul> and </ul> tags.

    \n
    const htmlList = array => `<ul>${}</ul>`
    \n
    5. \n
  5. \n

    Now create another function htmlListItem() that accepts an object\nand returns a template string containing the code for one single list item\n(using an embedded expression and returning the concatenation of firstName\nand lastName).

    \n
    const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${}</ul>`
    \n
    6. \n
  6. \n

    Now inside the embedded expression in the htmlList() function call the map() method\non the array and pass the htmlListItem() function.

    \n
    const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem)}</ul>`
    \n
    7. \n
  7. \n

    Finally join the result of the map() function using the join() method …

    \n
    const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}</ul>`
    \n
    8. \n
  8. \n

    And adjust the formatting of the output:

    \n
    const htmlListItem = object => `\n  <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`
    \n

    Alternatively you use \\n and \\t to format the output:

    \n
    const htmlListItem = object => `\\n  <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\\n</ul>`
    \n
    9. \n
  9. Voilá, a delicious function that creates an HTML list based on an object array:
    10. \n
\n
```javascript\nconsole.log(htmlList(persons))\n```\n\nAnd the generated HTML code looks like this:\n\n```html\n<ul>\n  <li>JohnDoe</li>\n  <li>JaneDoe</li>\n  <li>JaneSmith</li>\n  <li>DaveSmith</li>\n  <li>JaneCarpenter</li>\n</ul>\n```
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-17-html-list-using-template-strings/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-17T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create an HTML list based on an array using template strings - part 1"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-17-html-list-using-template-strings/"}}}