By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,961 Members | 1,456 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,961 IT Pros & Developers. It's quick & easy.

How to get Json as key and value in the Ajax $.getJSON()?

P: 28
I have this ajax code for getting json from Jobs.json file.
Expand|Select|Wrap|Line Numbers
  1.  $(document).ready(function(){
  2.         $('#btn2').click( callJobs );
  3.         });
  4.  
  5. function callJobs()
  6. {
  7.  
  8.  
  9.      alert("getting results...");
  10.     $.getJSON('Jobs.json', function(JSON){
  11.         $('#result').empty();
  12.  
  13.         $.each(JSON.jobs, function(i, JOB){
  14.             $('#result')
  15.             .append(JOB.Job +'<br />')
  16.             .append(JOB.Priority+'<br />')
  17.             .append(JOB.DueDate+'<br />')
  18.             .append(JOB.Iscompleted+'<hr />');
  19.       });
  20.     });
  21. }
Jobs.json code is below.
Expand|Select|Wrap|Line Numbers
  1. {
  2. "jobs":[
  3.   {
  4.      "Job":"Job1",
  5.      "Priority":"Low",
  6.      "DueDate":"11.03.2013",
  7.      "Iscompleted":"No"
  8.   },
  9.   {
  10.      "Job":"Job2",
  11.      "Priority":"High",
  12.      "DueDate":"11.03.2013",
  13.      "Iscompleted" : "No"
  14.   },
  15.   {
  16.      "Job":"Job3",
  17.      "Priority":"Medium",
  18.      "DueDate":"11.03.2013",
  19.      "Iscompleted":"No"
  20.   }
  21.   ]
  22.   }
Now I want to rewrite $.each function dynamically.That is, it will write the json string as key and value instead of .append() .
Mar 11 '13 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
See the first example in the documentation to give you an idea:
http://api.jquery.com/jQuery.getJSON/
Mar 13 '13 #2

P: 28
I tried like this.Which part do you think wrong?
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>To-Do</title>
  4.         <meta name="description" content="To-Do" charset="utf-8">
  5.         </meta>
  6.  
  7.         <script language="javascript" type="text/javascript">
  8. function mr(type,URL) {
  9.  
  10.                 var hr = new XMLHttpRequest();
  11.  
  12.                 //SET UP VARS CORRECTLY FOR GET/POST
  13.                 var content = document.getElementById("content").value;
  14.                 var vars = "content=" +content;
  15.  
  16.                 if (type == 'GET')
  17.                     URL = URL + '?' + vars;
  18.  
  19.                 //SET EVENTHANDLERS (THERE ARE ALOT MORE)
  20.                 hr.onreadystatechange = function() {
  21.                     if (hr.readyState == 4 && hr.status == 200) {
  22.                         var return_data = hr.responseText;
  23.                         document.getElementById("result").innerHTML = return_data;
  24.                     }
  25.  
  26.                 }
  27.                 //OPEN THE REQUEST
  28.                 hr.open(type, URL, true);
  29.  
  30.                 //SET HEADERS
  31.                 hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  32.  
  33.                 switch(type) {
  34.                     case 'GET':
  35.                         hr.send();
  36.                         break;
  37.                     case 'POST':
  38.                         hr.send(vars);
  39.                         break;
  40.                 }
  41.  
  42.                 document.getElementById("result").innerHTML = "Processing...";
  43.  
  44.             }
  45. </script>
  46.         <style type="text/css">
  47.             button {
  48.                 cursor: pointer
  49.             }
  50.             div {
  51.                 color: #666;
  52.                 font: normal 13px "Trebuchet MS";
  53.                 width: 350px;
  54.                 padding: 10px
  55.             }
  56.         </style>
  57.     </head>
  58.  
  59.     <body>
  60.         <div>
  61.             Add Item:
  62.             <input type="text" name="name" id="content">
  63.             <br>
  64.             <button onclick="javascript:mr('POST','To-Do.php');" type="button" id="btn1">
  65.                 Submit
  66.             </button>
  67.             <br>
  68.             <button onclick="javascript:mr('GET','get.php');" type="button" id="btn2" >
  69.                 List Jobs
  70.             </button>
  71.             <div id="result"></div>
  72.         </div>
  73.     </body>
  74. </html>
  75.  
  76.  
Mar 13 '13 #3

acoder
Expert Mod 15k+
P: 16,027
This seems to be for your other question?
Mar 13 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.