Using JQuery REST to retrieve JSON

I am looking for a way to pull data from a RESTful URL only using JQuery.  Is this possible without using an Object Programming Language like C# or Java?  I want to take the RESTful data and parse it to a page.  Thanks!
VBBRettAsked:
Who is Participating?
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.

skijCommented:
In the attached example, data is pulled  from a RESTful URL only using JQuery.  The results are received in JSON format, wrapped in a callback function, a method known as JSONP.
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
 var q = 'vervet monkey';
 results=5;
 if(location.search) q=unescape(location.search);
 $.getScript('https://ajax.googleapis.com/ajax/services/search/images?callback=processResults&rsz='+results+'&v=1.0&q='+escape(q));
});

function processResults(data){
$.each(data.responseData.results, function (i, data) {
 $('#gImages').append('<a href="'+data.originalContextUrl+'" target="_blank"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:'+data.imageId+'" alt="'+data.titleNoFormatting+'" title="'+data.titleNoFormatting+'" /><a>');
});
}

</script>
</head>

<body>

<h1>Image Results</h1>

<div id="gImages"></div>

</body>
</html>

Open in new window

0
VBBRettAuthor Commented:
OK, without making it too complicated, how would I refer to a url and then parse pieces of an object to text  boxes afterwards?  I only need to have 1 string as a parameter to pass to the url.
0
skijCommented:
HTML/JavaScript/jQuery:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
 var q = 'monkey';
 $.getScript('rest.js?q='+escape(q));
});

function processResults(data){
 $.each(data.responseData.results, function (i, data) {
  alert( data.var1 );
 });
}

</script>
</head>

<body>

<h1>Image Results</h1>

</body>
</html>

Open in new window

The data file in this example should be named ''rest.js" and it could return dynamic data based on the "q=" parameter.  It should be in this format:
processResults({
    "responseData": {
        "results": [{
            "var1": "Hello 1",
            "var2": "World 1"

        }, {
            "var1": "Hello 2",
            "var2": "World 2"
        }, {
            "var1": "Hello 3",
            "var2": "World 3"
        }]
    }
})

Open in new window

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

VBBRettAuthor Commented:
OK, well that's the thing.  I am not trying to point to a js file to retrieve data, I am attempting to point to a json file to retrieve the data and parse it.
0
skijCommented:
Why not wrap the JSON file into a function?  This is JSON:
{
    "responseData": {
        "results": [{
            "var1": "Hello 1",
            "var2": "World 1"

        }, {
            "var1": "Hello 2",
            "var2": "World 2"
        }, {
            "var1": "Hello 3",
            "var2": "World 3"
        }]
    }
}

Open in new window

This is JSONP:
processResults({
    "responseData": {
        "results": [{
            "var1": "Hello 1",
            "var2": "World 1"

        }, {
            "var1": "Hello 2",
            "var2": "World 2"
        }, {
            "var1": "Hello 3",
            "var2": "World 3"
        }]
    }
})

Open in new window

0
VBBRettAuthor Commented:
OK, now I'm confused.  I am attempting to pull the JSON data using JQuery and parsing it.  I don't have access to the JSON file, so I cannot modify the JSON data.
0
VBBRettAuthor Commented:
Not sure what you mean by wrapping the file into a function
0
skijCommented:
Try this for the JSON:
{
        "results": [{
            "var1": "Hello 1",
            "var2": "World 1"

        }, {
            "var1": "Hello 2",
            "var2": "World 2"
        }, {
            "var1": "Hello 3",
            "var2": "World 3"
        }]
}

Open in new window

and this for the HTML/jQuery:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

 $.getJSON( "x.json?q=monkey", function( data ) {
  $.each( data.results, function( key, val ) {
    $('body').append(val.var1 + '<input type=""text" value="'+val.var2+'"><br />');
  });
 });

});

</script>
</head>

<body>

</body>
</html>

Open in new window

0
VBBRettAuthor Commented:
I see what you are doing now.  Your json file worked great because it is formatted the following way:

{
        "results": [{
            "var1": "Hello 1",
            "var2": "World 1"

        }, {
            "var1": "Hello 2",
            "var2": "World 2"
        }, {
            "var1": "Hello 3",
            "var2": "World 3"
        }]
}

Unfortunately for me, the file that I am working with is formatted in the following way:

{"var1": "Hello 1",  "var2": "Hello 2"}

So how can I make the proper adjustments?
0
skijCommented:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

 $.getJSON( "x.json?q=monkey", function( data ) {
   $('body').append(data.var1 + '<input type=""text" value="'+data.var2+'">');
 });

});

</script>
</head>

<body>

</body>
</html>

Open in new window

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.