Consuming Content API JSON

by nathanlogan

HTML

<div id="render"></div>

CSS

section.hwMessage {
  font-family: Helvetica, sans-serif;
  margin: 20px;
  color: #333;
}
p {
  padding: 10px;
  border: 1px solid #ccc;
}
strong {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  color: #8B0000;
}

JavaScript

const mapContent = function(items) {
  const newItems = items && items.map((item, index) => {
    return componentFactory(item)
  })

  return newItems.join(' ')
}


const componentFactory = function(obj) {
  switch (obj.element) {
    case 'hwMessage':
    	return `<section class="hwMessage">${mapContent(obj.content)}</section>`
    
    case 'hwMessageBody':
    case 'hwMessageSection':
      return mapContent(obj.content)

		case 'p':
      return `<p>${mapContent(obj.content)}</p>`

    case 'hwEmphasis':
    case 'b':
      return `<strong>${mapContent(obj.content)}</strong>`

    // example of object we'll just ignore (along with their children)
    case 'topicmeta':
    case 'titlealts':
    case 'prolog':
    case 'section.meta-data':
      return

    case 'text':
      return obj.content

    default:
      return mapContent(obj.content)
  }
}


const json = {map: {content: [{
  "element": "hwMessage",
  "_id": "FF84CDC0-430F-529C-BD30-108769DFFD4C",
  "_outputclass": "HwBoilerplate",
  "_xml_lang": "en-CA",
  "_class": "- topic/topic concept/concept hwMessage/hwMessage ",
  "content": [
    {
      "element": "hwMessageBody",
      "_class": "- topic/body concept/conbody hwMessageBody/hwMessageBody ",
      "content": [{
          "element": "hwMessageSection",
          "_id": "0463782D-8732-4409-86A7-BC4E6E59E677",
          "_class": "- topic/section hwMessage/hwMessageSection ",
          "content": [{
              "element": "p",
              "_class": "- topic/p ",
              "content": [
                {
                  "element": "hwEmphasis",
                  "_id": "23B21699-CB25-4F1C-B185-CC5E99F25F52",
                  "_class": "+ topic/ph hi-d/b hwutil-d/hwEmphasis ",
                  "content": [{
                    "element": "text",
                    "content": "Follow-up care is a key part of your loved one’s treatment and safety."
                  }]
                },
                {
                  "element":...