[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Get JSON file and load content into div

Posted on 2014-03-01
8
Medium Priority
?
1,085 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 54

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

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

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

650 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