Get json with data attributes

Developer
Moncho Varela
Size
3,609 Kb
Views
38,456
  1. Get json with data attributes Previews
  2. Get json with data attributes HTML Codes
  3. Get json with data attributes CSS Codes
  4. Get json with data attributes JS Codes

How do I make an get json with data attributes?

Simple tool to get data of json content using data attributes.. What is a get json with data attributes? How do you make a get json with data attributes? This script and codes were developed by Moncho Varela on 11 September 2022, Sunday.

Get json with data attributes Previews
IQ Test

Get json with data attributes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get json with data attributes</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ 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;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get json with data attributes - Script Codes CSS Codes

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;}

Get json with data attributes - Script Codes JS Codes

(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);
Get json with data attributes - Script Codes
Get json with data attributes - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded September 11, 2022
Rating 4
Size 3,609 Kb
Views 38,456
Do you need developer help for Get json with data attributes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
Get color on click
How to make spanish tortilla
Biru Css framework
Background video
Very simple svg animation
Welcome
IndexedDB demo
Responsive Gallery with Json data
Neo minimal theme
Another webSQL
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!