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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

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

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mcluffAuthor Commented:
Many thanks both all your help - most comprehensive answer i think i've ever received!!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.