Get JSON file and load content into div

mcluff
mcluff used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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

leakim971Multitechnician
Top Expert 2014

Commented:
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

Author

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!!
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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

leakim971Multitechnician
Top Expert 2014

Commented:
@padas, your code is great and fill better the requirements

Author

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?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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

Author

Commented:
Many thanks both all your help - most comprehensive answer i think i've ever received!!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial