SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

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

    Code:
    <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?
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  2. #2
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use return in your localJSON function?
    Code:
    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;
    });
    Code:
    <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>
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  3. #3
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't seem to do it.
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  4. #4
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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>';
    });
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  5. #5
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then consume it like so:
    Code:
    var test = localJSON({"timestamp":1188926432,"total":"3758"...});
    eval(test);
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  6. #6
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aha (but not really)

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

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

    Code:
    <script type="text/javascript">
    'some arbitrary string here'
    </script>
    where I need to, ideally, prepend a 'var varname =' right before the arbitrary string
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  7. #7
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's try a different approach: write you own wrapper function:
    Code:
    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:
    Code:
    <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.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  8. #8
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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:
    Code:
    <div id="test"></div>
    Add the following as the last thing on your page (after the closing html tag):
    Code:
    <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.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  9. #9
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Figured it out

    Code:
    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.
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  10. #10
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  11. #11
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  12. #12
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •