A unique system has been created to parse JSON and style it using CSS. Instead of outputting the data within the script, the goal is to retrieve data from a local or remote URL.
<script type='text/javascript'>
$(window).load(function(){
var jsonData={"users":[
{
"title":"Creative Design Tips",
"content":"Insert text here. Keep it brief with 100 characters maximum per panel.",
"url":"http://website.me/design_tips.php?=1234567890",
},
{
"title":"UX/UI Trends",
"content":"Jones",
"url":"http://example.com",
},
{
"title":"Digital Marketing Strategies",
"content":"Smith",
"url":"http://sample.com",
},
{
"title":"Web Development Tools",
"content":"Williams",
"url":"http://test.com",
}
]}
$(jsonData.users).each(function() {
var result = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
$('#feed').append(result);
});
});
</script>
Is there a way to fetch JSON data from a URL source and display it in a similar fashion as shown above?
Update
<script type='text/javascript'>
var newData;
$.ajax({
dataType: "json",
url: `file://${__dirname}/new_data.json`,
data: newData,
success: function(newData) {
newData = newData;
}
});
$(window).load(function(){
$(newData).each(function() {
var result = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
$('#feed').append(result);
});
});
</script>