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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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

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

Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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

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.
VBBRettAuthor Commented:
Not sure what you mean by wrapping the file into a function
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

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

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.