Solved

Get JSON file and load content into div

Posted on 2014-03-01
8
953 Views
Last Modified: 2014-03-04
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
0
Comment
Question by:mcluff
  • 3
  • 3
  • 2
8 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39897284
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39897392
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
 

Author Comment

by:mcluff
ID: 39897403
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39897541
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 82

Expert Comment

by:leakim971
ID: 39897584
@padas, your code is great and fill better the requirements
0
 

Author Comment

by:mcluff
ID: 39898440
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39898480
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
 

Author Closing Comment

by:mcluff
ID: 39902638
Many thanks both all your help - most comprehensive answer i think i've ever received!!!!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS Divs in Safari 3 18
Javascript Refresh Parent Page from Popup 3 24
angularls and plnkr 14 17
Different Delete Messages 7 10
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now