nakome
9/15/2013 - 5:59 PM

A Pen by Moncho Varela.

A Pen by Moncho Varela.

style.css
content_copyfile_download
body {
  background:#c0392b;
  font-family:Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
  font-size:1em;
  line-height:1.3em;
}
a{ color: #1abc9c;}
a:hover,a:focus{}
pre{
  position:relative;
  border: 1px solid #1abc9c;
  background:#ecf0f1;
  color:#e74c3c;
  white-space:pre;white-space:pre-wrap;word-wrap:break-word;
}
pre:after {
  content: attr(data-title);
  background: #1abc9c;
  color: #FFFFFF;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.2em 0.3em;
}
.main{
  position:relative;
  display:block;
  margin-top:1em;
  margin-left:1em;
  margin-right:1em;
  margin-bottom:1em;
  box-shadow:0 6px 3px -6px black;
  border-radius:4px;
  padding: 0;
  background:#e74c3c;
  color:white;
}
[data-ld="header"],
[data-ld="body"],
[data-ld="prefooter"],
[data-ld="footer"],
.box{  padding:0.5em;}

[data-ld="header"] h1,
[data-ld="body"] h2,
[data-ld="prefooter"] h2,
[data-ld="footer"]{ text-align:center;}


[data-ld="header"]{background:#1abc9c;color:#ecf0f1;}
[data-ld="body"]{background:#ecf0f1;color:#34495e;}
[data-ld="prefooter"]{background:#34495e;color:#e67e22;}
[data-ld="footer"]{ background:#2c3e50; color:#16a085;}
script.js
content_copyfile_download
(function($){
  var elem,
      // _(el) = $('[data-ld="element"]')
      _ = function(el){
        return $('[data-ld="'+el+'"]');
      },
      dataFn = $('[data-fn="getJson"]'),
      // Call data-file 
      thisUrl = $('body').data('file');
  
  if (typeof $.app == 'undefined')
  $.app = {};
  $.app.set = {
    // init
    init: function() {
      this.getData();
    },
    // Get json 
    getJson: function(url,el){
      // Before load data
      _(el).text('Loading please wait...');
      // Ajax no cache
      $.ajaxSetup({ cache: false });
      // Call json
      $.getJSON(url,function(data){
        // Read all elements
        $.each(data,function(index,obj){
          // If data-ld = a name load
          if(el === obj.name){
            elem = obj.content; 
            _(el).html(elem); 
          }
        });
      }).error(function(j,t,e){ 
        // If error show this
        dataFn.html(e);
      });
    },
    // Get data
    getData: function(el){  
      var self = this;
      // Read all data-fn obj
      $.each(dataFn,function(index,o){
        self.getJson(thisUrl,o.getAttribute('data-ld'));
      });   
    }
  };
  $(document).ready(function() {
    // init app
    $.app.set.init();
  });
})(jQuery);
index.html
content_copyfile_download
<body  data-file="https://dl.dropboxusercontent.com/u/23834858/api/codepen.json">
<div class="main"> 
  <section class="box">
    <h3>Hello friends</h3>
    <p>This is simple tool to get data of json content using data attributes.</p>
    <p>Only need json file and &nbsp;this data attributes.</p>
    
    <p>
      <em>data-file="The url of you json file" put this in body tag</em><br />
      <small><b>:: Try to change the name of file to codepen2.json ::</b></small>
    </p>
    
     <p>
       <em>data-fn="getJson" To call function</em><br />
       <em>data-ld=" name " is the name of json value.</em>
    </p>
    
    <p>
      <b>Very simple json structure:</b>
    </p>
    
    <pre data-title="json">
{
  {
    "name":"header"  -&gt; this is de name of data-ld  
    "content":"Content header here" 
  },
  {
    "name":"footer"  -&gt; this is de name of data-ld  
    "content":"Content footer here" 
  }
}</pre>
    <h3>Demo data loaded.</h3>
  </section>
  <section data-ld="header" data-fn="getJson"></section>
  <section data-ld="body" data-fn="getJson"></section>
  <section data-ld="prefooter" data-fn="getJson"></section>
  <section data-ld="footer" data-fn="getJson"></section>
</div>
</body>
Get-json-with-data-attributes.markdown
content_copyfile_download
  • Rendered
  • Source

Get json with data attributes

Simple tool to get data of json content using data attributes.

A Pen by Moncho Varela on CodePen.

License.