DATON

[Demo] [Tests]

DATON (Data ATtribute Object Notation) is a javascript parser for object notations embedded in the dom via data attributes. The main use case for this is to allow progressive enhancement such that a sever could render standard markup decorated with DATON specific attributes and then these can be easily parsed and accessed in javascript as plain old objects.

Usage

Include DATON in your page

<script src="js/DATON.min.js"></script>

In your markup render DATON specific attributes to represent data that should be parsed

<div id="data">
  <ul data-dtn-array="people">
    <li data-dtn-object>
      <a href="http://www.google.com" data-dtn-attr="{ 'link' : 'href' }">
        <img src="/img/joe.png" width="400" data-dtn-attr="{ 'image' : 'src', 'size' : 'width'  }" />
        <h4 data-dtn-value="name">Joe blogs</h4>
        <p>Job Role: <span data-dtn-value="role">Director</span></p>
        <p>Email: <span data-dtn-value="email">[email protected]</span></p>
        <div data-dtn-object="address">
          <p data-dtn-value="line1">10 Some St</p>
          <p data-dtn-value="town">Barnsley</p>
          <p data-dtn-value="postcode">S75 1RE</p>
        </div>
      </a>
    </li>
    <li data-dtn-object>
        <a href="http://www.yahoo.com" data-dtn-attr="{ 'link' : 'href' }">
        <img src="/img/jane.png" width="400" data-dtn-attr="{ 'image' : 'src', 'size' : 'width' }"  />
        <h4 data-dtn-value="name">Jane blogs</h4>
        <p>Job Role: <span data-dtn-value="role">Director</span></p>
        <p>Email: <span data-dtn-value="email">[email protected]</span></p>
      </a>
    </li>
  </ul>
</div>

In your javascript, call DATON.parse on your root dom node

var div = document.getElementById('data');
var result = DATON.parse(div);
console.log(result);

// Output
{
    "people":[
        {
            "link":"http://www.google.com",
            "image":"/img/joe.png",
            "size":"400",
            "name":"Joe blogs",
            "role":"Director",
            "email":"[email protected]",
            "address":{
                "line1":"10 Some St",
                "town":"Barnsley",
                "postcode":"S75 1RE"
            }
        },{
            "link":"http://www.yahoo.com",
            "image":"/img/jane.png",
            "size":"400",
            "name":"Jane blogs",
            "role":"Director",
            "email":"[email protected]"
        }
    ]
}

Supported attributes are

• data-dtn-array Denotes the start of an array
• data-dtn-object Denotes the start of an object
• data-dtn-attr Defines an attribute map where the object key denotes the target property name, and the value denotes the attribute value to extract
• data-dtn-value Denotes a value entry taking the inner text content of the dom node

For attributes data-dtn-array, data-dtn-object and data-dtn-value the value of the attribute denotes the object key within the parsed parent object context. If the parent object context is an array, the value can be ommitted and the parsed child objects / values will be pushed into the array in order of occurance.