Get JSON file and load content into div

Hi Experts,

I have a JSON file that is formatted like this

link,title,date

[["http:\/\/192.168.1.108\/featured\/train-chris-ohare-877\/","How they train – Chris O’Hare","February 26, 2014"],["http:\/\/192.168.1.108\/reports\/bupa-westminster-mile-celebrate-60th-anniversary-bannisters-sub-four-minute-mile-874\/","Bupa Westminster Mile to celebrate 60th anniversary of Bannister’s sub-four-minute mile","February 26, 2014"],["http:\/\/192.168.1.108\/featured\/rise-rise-genzebe-dibaba-871\/","The rise and rise of Genzebe Dibaba","February 26, 2014"],["http:\/\/192.168.1.108\/featured\/farah-bolt-isinbayeva-nominated-laureus-world-sports-awards-868\/","Farah, Bolt and Isinbayeva nominated for Laureus World Sports Awards","February 26, 2014"],["http:\/\/192.168.1.108\/performance\/mark-drys-top-four-hammer-training-tips-866\/","Mark Dry’s top four hammer training tips","February 25, 2014"],["http:\/\/192.168.1.108\/videos\/brooks-armagh-international-road-race-womens-3km-859\/","Brooks Armagh International Road Race – women’s 3km","February 25, 2014"],["http:\/\/192.168.1.108\/videos\/brooks-armagh-5k-international-road-race-856\/","Brooks Armagh 5k International Road Race","February 25, 2014"],["http:\/\/192.168.1.108\/featured\/mccormick-whittle-win-armagh-864\/","McCormick and Whittle win in Armagh","February 21, 2014"],["http:\/\/192.168.1.108\/performance\/mark-drys-hammer-exercises-850\/","Mark Dry’s hammer exercises","February 20, 2014"],["http:\/\/192.168.1.108\/performance\/coaching-young-athletes-847\/","Coaching young athletes","February 20, 2014"]]

Open in new window


I want it to load into .search-archive and format like so:

<a href="LINK">
<span class="post-title">TITLE</span>
<span class="post-date">DATE</span>
</a>

Can someone please help... Im tearing my hair out

Many thanks in advance
mcluffAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There will be more than one way to do this.  If we simply want to exchange the variable json for an external source on the same domain https://api.jquery.com/jQuery.ajax/ you can find the example
$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

Open in new window

and that will convert for us to http://jsbin.com/zazux/2/edit?html,js,output
$.ajax({
  url: "http://jsbin.com/vagir/1.js",
  cache: false
})
  .done(function( json ) {
     $.each($.parseJSON(json), function(idx, obj) {
	$('#results').append('<a href="'+obj.link+'"><span class="post-title">'+obj.title+'</span><span class="post-date">'+obj.date+'</span></a><br>');
});
  });

Open in new window

using the external file http://jsbin.com/vagir/1.js

If using a different domain, you have use jsonp
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you control the output?  As you can see, you have valid json, but it acts as one item
http://jsbin.com/gunuc/1/

// http://jsbin.com/kayik/1.js
//<a href="LINK">
//<span class="post-title">TITLE</span>
//<span class="post-date">DATE</span>
//</a>
$.getJSON( "http://jsbin.com/kayik/1.js", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + key+' '+val + "</li>" );
  });
 
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Open in new window

0
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/QZ2mw/

<div data-ng-app="myApp" data-ng-controller="myCtrl">
    <a data-ng-href="{{link[0]}}" data-ng-repeat="link in links">
        <span class="post-title" data-ng-bind-html="link[1]"></span>
        <span class="post-date" data-ng-bind-html="link[2]"></span>
    </a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-sanitize.js"></script>

Open in new window


var myApp = angular.module("myApp",["ngSanitize"])
	.controller("myCtrl",["$scope", "Links", function($scope, Links){
		Links.get().then(function(data) {
			$scope.links = data;
		});
	}])
	.factory("Links", ["$http", "$q", function($http, $q) {
		return {
			get: function() {
				var deferred = $q.defer();

				$http.get("/path/to/file.json", {}).success(function(response) {
					deferred.resolve(response);
				})
				.error(function(data, status, headers, config) {
					deferred.reject(data);
				});

				return deferred.promise;
			}
		}
	}]);

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mcluffAuthor Commented:
Hi Padas - i do have control of the output... Do you have any pointers in how to split the items?

Hi leakim971 - Thats crazy - I've heard of angular but never used it!!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Leakim is  better at this stuff then I am.  However,  would it be easier to format
[
    {
        "link": "http://192.168.1.108/featured/train-chris-ohare-877/",
        "title": "How they train &#8211; Chris O&#8217;Hare",
        "date": "February 26, 2014"
    },
    {
        "link": "http://192.168.1.108/featured/train-chris-ohare-877/",
        "title": "How they train &#8211; Chris O&#8217;Hare",
        "date": "February 26, 2014"
    }
]

Open in new window

http://jsbin.com/zazux/1/edit?html,js,output
var json ='[{"link": "http://192.168.1.108/featured/train-chris-ohare-877/","title": "How they train &#8211; Chris O&#8217;Hare","date": "February 26, 2014"},{"link": "http://192.168.1.108/featured/train-chris-ohare-877/","title": "How they train &#8211; Chris O&#8217;Hare","date": "February 26, 2014"}]';


 $.each($.parseJSON(json), function(idx, obj) {
	$('#results').append('<a href="'+obj.link+'"><span class="post-title">'+obj.title+'</span><span class="post-date">'+obj.date+'</span></a><br>');
});

Open in new window

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="results"></div>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
@padas, your code is great and fill better the requirements
0
 
mcluffAuthor Commented:
Many thanks for both of your help... obviously got the a team on it.

Padas - how would I load an external JSON file into the each function?
0
 
mcluffAuthor Commented:
Many thanks both all your help - most comprehensive answer i think i've ever received!!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.