Json request with Javascript

Question

I am just beginner on java script and JSON and never had done any work in these before. My employer has just asked me to create the basic POC of these.
Scenario: I have a REST API and when i call it, it returns back response in JSON format.
Need to To: Create a HTML page and use javascript to call that REST API and capture JSON response and print in the same HTML page.

<script type="text/javascript">
    function loadMe() {
       loadJSON('http://myrestAPI');
   }
        function loadJSON(url) {
            //Help me here to capture the response and print in html page. 
         }
</script>

I would appreciate your help. This might be simple, but for me i have no idea because i never have done anything similar in java script and json. I goggled but could not find anything.

Thanks, chota

jQuery IS just javascript :P Is there a reason that you can't use it? I'd wonder about an employer who explicitly told me that I couldn't use OS packages that make me more efficient in my work (barring legal reasons of course)... — Demian Brecht
– Demian Brecht, Commented Jan 5, 2011 at 19:57
jQuery is mighty bulky and sometimes you need to develop without it. Good example of a situation like that would be a userscript, or any situation where you only need to do one thing. That said, I am almost always using jQuery. — Sandwich
– Sandwich, Commented Jan 5, 2011 at 20:00
jQuery is a whopping 26kB. Given that even google's simple homepage is 260+kB, I'd say "mighty bulky" is a bit of an overstatement. — Jerod Venema
– Jerod Venema, Commented Jan 5, 2011 at 20:53

Praneeth · Accepted Answer · 2011-01-05 19:58:29Z

2

 function SendRequest(MSG)
 {
  var objJSON = {
   "msg" : MSG
  };
  var strJSON = encodeURIComponent(JSON.stringify(objJSON));
  new Ajax.Request("ReceiveJSON.jsp",
   {
    method: "post",
    parameters: "strJSON=" + strJSON,
    onComplete: Respond
   });
 }

function Respond(REQ)
 {
  document.getElementById("ResponseDiv").innerHTML=REQ.responseText;
 }

answered Jan 5, 2011 at 19:58

Praneeth

2,5475 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sam_33 Over a year ago

This is very complex for me to understand

Praneeth Over a year ago

Can you please explain which part you couldnt understand

Yuri Syro Over a year ago

Ajax object doesn't exist in my browser

user368191 · Accepted Answer · 2011-01-06 04:17:25Z

1

If you view your REST request response, the JSON might be something like this

{
    "users": [
        {"first": "Peter",
         "last": "Griffin"}
    ],
    "books": [
        {"title": "Design Patterns",
         "author": "The Gang of Four",
         "year": 1995}

    ]

}

This rest query result can be loaded as a javascript array object

<script language="javascript">

var resultObj = <Result of your REST url + query pasted here>;

</script>

Then,

you access it in your html with javascript blocks like

document.write(resultObj.users[0].first)

which would return 'Peter'

answered Jan 6, 2011 at 4:17

user368191

Comments

JohnO · Accepted Answer · 2011-01-06 04:27:33Z

0

Praneeth has the simple javascript answer. If you can use jquery (and there really is no reason you cannot) it gets way easier:

<div id="response"></div>
$.get(url, function(data) {
  $('#response').append(data.property);
});

answered Jan 6, 2011 at 4:27

JohnO

2,0692 gold badges13 silver badges15 bronze badges

2 Comments

the_new_mr Over a year ago

It doesn't make sense to append the data to the div. You could have a <p> element inside the div and append to that instead.

the_new_mr Over a year ago

My bad. It does make sense and works. Didn't think it through. Sorry.

Andrew · Accepted Answer · 2012-08-16 20:15:59Z

0

$.getJSON(url, null, function (data) { .... });

edited Aug 16, 2012 at 20:15

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

answered Jan 5, 2011 at 19:54

Praneeth

2,5475 gold badges30 silver badges47 bronze badges

Comments

the_new_mr · Accepted Answer · 2013-02-14 13:53:04Z

0

Here's a complete working example using jQuery that should work.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
</head>

<body>


<div id="response">
    <p id="responseParagraph">Base text</p>
</div>

<script>
    $.getJSON('http://myrestAPI',
        function(data) {
            $('#responseParagraph').append("<p>"+data.responseMessage+"</p>");
        });
</script>
</body>
</html>

answered Feb 14, 2013 at 13:53

the_new_mr

3,7415 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

Json request with Javascript

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related