BlueButton Json to XML

by Nemesis02

HTML

<script src="https://rawgit.com/tj/ejs/master/ejs.js"></script>
<script src="https://github.com/blue-button/bluebutton.js/releases/download/0.4.2/bluebutton.js"></script>
<div class="frame">
  <div>
    <b>JSON Input</b>
  </div>
  <div class="textAreaAnchor">
    <textarea id="input">{  
   "document":{  
      "date":"2012-09-12T00:00:00Z",
      "title":"Community Health and Hospitals: Health Summary",
      "author":{  
         "name":{  
            "prefix":"Dr",
            "given":[  
               "Henry"
            ],
            "family":"Seven"
         },
         "address":{  
            "street":[  
               "1002 Healthcare Drive "
            ],
            "city":"Portland",
            "state":"OR",
            "zip":"97266",
            "country":"US"
         },
         "phone":{  
            "work":"tel:555-555-1002"
         }
      },
      "documentation_of":[  
         {  
            "name":{  
               "prefix":"Dr.",
               "given":[  
                  "Henry"
               ],
               "family":"Seven"
            },
            "phone":{  
               "work":"tel:+1-555-555-5000"
            },
            "address":{  
               "street":[  
                  "1002 Healthcare Dr"
               ],
               "city":"Portland",
               "state":"OR",
               "zip":"97266",
               "country":"US"
            }
         },
         {  
            "name":{  
               "prefix":"Dr.",
               "given":[  
                  "Henry"
               ],
               "family":"Seven"
            },
            "phone":{  
               "work":"tel:+1-555-555-5000"
            },
            "address":{  
               "street":[  
                  "1002 Healthcare Dr"
               ],
               "city":"Portland",
               "state":"OR",
               "zip":"97266",
               "country":"US"
            }
         }
      ],
      "location":{  
...

CSS

.frame {
  width: 450px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

button {
  padding: 10px;
}

.textAreaAnchor {
  position: relative;
}

.textAreaButtons {
  position: absolute;
  right: 5px;
  top: 5px;
}

textarea {
  width: 100%;
  height: 300px;
}

JavaScript

(function() {
  var inputTxt = document.getElementById('input'),
    outputTxt = document.getElementById('output'),
    convertBtn = document.getElementById('convert'),
    xhr = new XMLHttpRequest(),
    template; // this could also be AJAX based

  xhr.open('get', 'https://raw.githubusercontent.com/blue-button/bluebutton.js/master/lib/generators/ccda_template.ejs', false);
  xhr.send();

  template = xhr.responseText;

  convertBtn.addEventListener('click', function onClickConvertBtn(e) {
    try {
      var json = JSON.parse(inputTxt.value),
        record = BlueButton(inputTxt.value, {
          generatorType: 'ccda',
          template: template
        });

      outputTxt.value = record.data;
    } catch (e) {
      alert(e);
    }
  });
})();