asked on

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!

skij

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

VBBRett

ASKER

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.

skij

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

VBBRett

ASKER

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.

skij

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

VBBRett

ASKER

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.

VBBRett

ASKER

Not sure what you mean by wrapping the file into a function

skij

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

VBBRett

ASKER

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?

ASKER CERTIFIED SOLUTION

skij

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial