Dynamic javascript into a variable? (D1gg API + jQuery)

[rhlowe]

I am experimenting with the D1gg API and jQuery.

Because of the nature of AJAX and the fact that I cannot in the app in question, use a proxy, I opted for dynamically generated JavaScript.

function localJSON() {}
$(document).ready(function() {
	path = 'http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10';
	$('head').append('<script name="jsonObject" type="text/javascript" src="' + path + '"></script>');
});

The preceeding code creates a javascript that is appended to the documents head. Within that script is a single line of unformatted JSON with the last 10 popular posts on D1gg, that part works, outputs something like this:

<script src="http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10" type="text/javascript" name="jsonObject">
localJSON({"timestamp":1188926432,"total":"3758"...})
</script>

You know, JSON. So now I have a problem. How do I get the data in the function localJSON into something I can actually use, like a variable?

[miggl]

You could use return in your localJSON function?

function localJSON() {}
$(document).ready(function() {
	path = 'http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10';
	$('head').append('<script name="jsonObject" type="text/javascript" src="' + path + '"></script>');
return path;
});

<script src="http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10" type="text/javascript" name="jsonObject">
var test = localJSON({"timestamp":1188926432,"total":"3758"...});
</script>

[rhlowe]

That doesn't seem to do it.

[miggl]

Sorry, I didn't look too closely the first time. I see what you are saying now (after re-reading your original post). Try this:

function localJSON() {}
$(document).ready(function() {
	path = 'http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10';
	$('head').append('<script name="jsonObject" type="text/javascript" src="' + path + '"></script>');
return '<script name="jsonObject" type="text/javascript" src="' + path + '"></script>';
});

[miggl]

Then consume it like so:

var test = localJSON({"timestamp":1188926432,"total":"3758"...});
eval(test);

[rhlowe]

I see what you are saying, unfortunately, the problem is how d1gg returns the json to me:

<script src="http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10" type="text/javascript" name="jsonObject">
localJSON({"timestamp":1188926432,"total":"3758"...})
</script>

where 'localJSON({"timestamp":1188926432,"total":"3758"...})' is line 1 in the script.

Similar to

<script type="text/javascript">
'some arbitrary string here'
</script>

where I need to, ideally, prepend a 'var varname =' right before the arbitrary string

[miggl]

Let's try a different approach: write you own wrapper function:

function get_my_****(s_querystring)
{
    eval('<script name="jsonObject" type="text/javascript" src="http://services.****.com/stories/popular?' + s_querystring + '"></script>');
}

Call this where ever you want your ****-top-10 to appear on the page, like so:

<div><script type="text/javascript">get_my_****("appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10")</script></div>

I believe this should work.

[miggl]

I've put together a working example with the aid of the ***** API: http://apidoc.****.com/ListStories

Place the following in your head script somewhere:

function localJSON(a_stuff)
{
	var s_html = "<table>";

	s_html += "<tr>";
	s_html += "<th>ID</th>";
	s_html += "<th>Link</th>";
	s_html += "<th>Date Submitted</th>";
	s_html += "<th>*****</th>";
	s_html += "<th>Comments</th>";
	s_html += "<th>Title</th>";
	s_html += "<th>Description</th>";
	s_html += "<th>HREF</th>";
	s_html += "<th>Status</th>";
	s_html += "</tr>";
	for (var i=0; i<a_stuff["stories"].length; i++)
	{
		s_html += "<tr>";
		s_html += "<td>" + a_stuff["stories"][i]["id"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["link"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["submit_date"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["*****"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["comments"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["title"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["description"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["href"] + "</td>";
		s_html += "<td>" + a_stuff["stories"][i]["status"] + "</td>";
		s_html += "</tr>";
    }
	s_html += "</table>";

	document.getElementById("test").innerHTML = s_html;
}

Add the following somewhere in your body:

<div id="test"></div>

Add the following as the last thing on your page (after the closing html tag):

<script src='http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10'></script>

Load your page, and you should see your top-10 *****. Alter the localJSON function to suit your needs as far as what you want to display. Note that the API also has additional things you can display, I just showed the main / easiest ones.

[rhlowe]

var theResults;
function localJSON(data) {
	theResults = data;
}
$(document).ready(function() {
	path = 'http://services.****.com/stories/popular?appkey=http%3A%2F%2Fwww.roberthenrylowe.com&type=javascript&callback=localJSON&count=10';
	$('head').append('<script type="text/javascript" src="' + path + '"></script>');
});

'theResults' is now available globally. I swear this was the first thing I tried, but apparently I have to obsess about it all day at work before it works.

[miggl]

Hi Rob!

May I ask why you opted to put the code in the head of the document, instead of loading at the end? (Just curios, there's no wright or wrong.)

Glad to see you got it working!

[rhlowe]

I try never, ever to hard code javascript into a document. I am pretty obsessive about unobtrusive javascript. Thanks for all the help today miggl

[miggl]

Thanks for the reply. So you do this to separate presentation from from business logic, I presume? Are you using a framework that supports this (it appears that you are using non-standard javascript calls that are part of the prototype framework?)? Just curious. I totally understand you concern in that regard.

How do you segregate your javascript code from you document? The reason I am asking, is because you have to have at least one javascript reference that loads a javascript file that references more javascript.

I'm asking out of genuine interest, not criticism.

Cheers! Have a good night.