How to get JSON key and value with ajax - javascript

I have json like this :
[{"name":"dhamar","address":"malang"}]
How can I get the key and value from that json with ajax?
I have tried code like this :
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: '--url--',
dataType: 'text',
success: function(jsonData) {
$.each(response,function(index,value)
{
$("[name="+index+"]").val(value);
});
}
});
});
</script>
but I get nothing. Anyone please help me, thanks

Try changing the .success() part:
.success: function(jsonData) {
var response = JSON.parse(jsonData);
console.log(response);
}
And remove dataType: 'text',.
You should see the object in your browser console and should be able to iterate with .each() from then on. Please share your results.

I think you want this:
$.each(response,function(key,value){
console.log(key":"+value.name);
console.log(key+":"+value.address);
})
FIDDLE DEMO

Related

(this).parent().find not working for getting response in ajax call

$(".content-short").click(function() {
$(".content-full").empty();
var contentid=$(this).parent().find(".content-full").attr('data-id');
var content=$(this).parent().find(".content-full");
alert(contentid);
var collegename = $(this).attr('data-id');
$.ajax({
type: "post",
url: "contenthome.php",
data: 'collegename=' + collegename,
dataType: "text",
success: function(response) {
$content.html(response);
}
});
});
here the alert displays the specific data-id but
content=$(this).parent().find(".content-full");
this didn't displays data in content-full div with that specific data-id
anything wrong in the code or something else?
the query displays data if i use(."content-full"); instead of
$(this).parent().find(".content-full");
Inside the ajax callback you are using $content, but you declare your variable as content. May that be the problem?
Your question is not clear. What are you trying to achieve?

Javascript function to change input fields

I'm trying to check if a user exists in my database and then change the values of my input fields to match that user's information. I have the following code but it doesn't seem to work.
<button onclick="checkAvailability()">Check Availability</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function checkAvailability()
{
$(function()
{
$.ajax(
{
type: 'POST',
url: 'test.php',
data: "name=" + $("#name").val(),
dataType: 'json',
success: function(row)
{
$('#name').val(row[0]);
$('#address1').val(row[1]);
$('#phone1').val(row[2]);
alert('success');
}
});
});
}
</script>
The alert goes off but none of the values are changed. I checked the response using Firebug and the response is a JSON object with the user's information. I'm not sure where the error is. Thank you for any input.
If you have a json object you must use: $("#name").val(row.name);
In case you are getting a json then it might look like this
var json = [{"name": "sample"},{"phone":"sample"},{"address":"sample"}];
When you are doing row[0].
what you get is an object["name":"sample"]
So you must make the following change
success: function(row)
{
$('#name').val(row.name);
$('#address1').val(row.address);
$('#phone1').val(row.phone);
alert('success');
}
Also make sure you have input types with id's name, address1 and phone1

using javascript onload() and ajax to retrieve php array

I'm using onload() and ajax to get the array from php, but it didnt work. The html page should be able to get the array from n1.php and alert("GOOD"), but it's not giving any response, not even alerting GOOD or BAD so i really dont know what's wrong with the code. How can I fix this??
n1.html:
<!DOCTYPE html>
<html>
<body onload="getArr();">
here
</body>
<script type="text/javascript">
function getArr(){
alert('return sent');
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
}
</script></html>
n1.php:
<?php
$output = array("cat","dog");
echo json_encode($output);
?>
The request must contains the type of request. Also the dataType refers on data you are going to send,as long as you don't send any data, it does not need here.
Try this:
$.ajax({
url: "n1.php",
type: "GET",
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Try this
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = json_data; // Do not parse json_data because dataType is 'json'
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Now, two things to note here:
You have not passed HTTP Method in the ajax but by default it is GET as mentioned here in jQuery AJAX docs. Please pass appropriate method type if it is not GET.
Since you have sent dataType as 'json', you need not parse json received in the response in success handler.

Refresh a table

I have read posts about this but I can't get the right answer.
I have tried Hide and Show to refresh a table:
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").show();
});
}
});
});
this does not work for me. I tried other animations as well but nothing works. I think im missing something or I'm using the wrong way.
Any Suggestion how to Refresh the table only?
Where are you loading the result data to the UI. Probably you need to set the result to any of the element. use the html method to do that
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}
I think you want to change/update the content of the #tableInbox and to do that you can try this:
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show();
});
}
Populate the table with the AJAX content
$("#cmdUnreadID").click(function(){
$.ajax({
type: "GET",
url:"orderBy.php",
data: "unreadCtrl=1",
success:function(result){
$("#tableInbox").hide(500,function(){
$("#tableInbox").html(result).show(); // <-- Notice html() call here, to populate the table
});
}
});
});
$("#cmdUnreadID").live('click', function () {
$("#tableInbox").hide(500);
$.ajax({
type: "GET",
url: "orderBy.php",
data: "unreadCtrl=1",
success: function (result) {
$("#tableInbox").html(result).show();
//Or
// $("#tableInbox").replaceWith(result).show();
}
});
});
i cant see on your code something that really changes the table,
you gota change the tables .htm() and feed the result like
$("#tableInbox").html(result)
note: you can also set dataType: to "html" or "xml" in your request, because if you receiving XML the result wont be suitable for direct feed to the table .html. jquery will do an inteligent guess from the datatype in servers response, but still it can be XML

Return a set from ajax to JavaScript

I have an ajax call which will return a set<E>. I need to process this set from the JavaScript function from which I call this ajax.
<script type="text/javascript">
function mySr(id){
$.ajax({
type: 'POST',
url: '../controller/action',
data: 'id=' + id,
success: function(data) {
var length= data.length
var size = data.size
alert(data[0]+'----'+length+'--'+size+'----'+data)
},
error: function () {
alert('error')
}
});
</script>
This is the way i used,
The alert will display like this
["37",
"40","80","90"]----22--undefined----[
I understood the data is clearly reached in the script but i don't know how to iterate through it.
How to iterate here?
How to get the length?
How to get each elements?
You need to parse the data. Try putting data = $.parseJSON(data); after the line success: function(data) {
See http://api.jquery.com/jQuery.parseJSON/ for more details.

Categories