Readin JSon File through ajax - javascript

This is my Ajax Request:
$.ajax({
type: 'POST',
url: "http://xx.json",
//data: '{id:id}',
//data: '{providername:providername}',
crossDomain: true,
dataType: 'jsonp',
jsonpCallback: 'loadData'
});
ok my request itself if failing coz i need to provide data in data variable above in request not sure how should I send my data to JSON to access the contents.following is json
{
"loadData" : {
"Facebook": [
{
"email" : "karthim1982#yahoo.com",
"first_name" : "Karthick"
},
{
"email" : "mallika132-iit#yahoo.co.in", "first_name" : "Mallika"
}
],
"Google" : [
{
"email" : "jameson42#gmail.com","first_name" : "Jameson"
},
{
"email" : "hariikriishnan#gmail.com","first_name" : "hari"
}
]
}
}
Please do check if anything wrong with JSON.
How can I access the Facebook 1st and 2nd Email or Google's first Email or First)name attribute

If you are asking for jsonp using jQuery, you will get a parameter called callback in the GET request, something like:
http://your.url/out.json?callback=jQuery123456789
What you need to do on the server-side is wrap the ouput in that callback, so instead of:
{"a": 1, "b": 2}
You need to provide your response like so:
jQuery123456789('{"a": 1, "b": 2}')
In your case, it looks like you're renaming the callback to loaddata. Keep in mind that jQuery will build this function for you, you don't need to define it. What you do need to define is the success callback that the data will be passed to.
For JSONP, jQuery loads the response not as an XMLHTTPRequest but as a <script> tag and secretly sets up that callback on the page. This is banking on you having control over the remote service.

Related

How to jQuery autocomplete with JSON?

For below JSON
{
"partnerNameListBeanStruts2Map": [
{
"firstName": "sachin",
"partnerId": 123
},
{
"firstName": "Ankit",
"partnerId": 234
}
]
}
What code should I wright to done jQuery autocompleter.
Here is my code.
Here I want autocomplete element's value is like sachin OR ankit and id is like like 123 OR 234 is id of element.
$(document).ready(function() {
$(function() {
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "list.action",
type : "POST",
data : {
term : request.term
},
dataType : "json",
success : function(data)
{
****What should I write here to work my code?****
}
});
}
});
});
According to the doc, You should return your data with the response callback function.
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
$(function($) {
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "list.action",
type : "POST",
data : {
term : request.term
},
dataType : "json",
success : function(data)
{
***response (data) ;***
}
});
}
});
});

Jquery ajax POST inconsistent with Hapijs server inject

Here is what my Ajax post looks like:
$.ajax({
type: "POST",
url: "/create",
data: {
"question": $('#question').val(),
"options": options
},
success: function() { window.location.href="/view"; }
});
Fairly simple. options is an array of string charachters. The problem is, when I receive on the server end with Hapijs, the request payload shows this object received:
{
question: "..etc..",
"options[]": [..etc...]
}
Why does it add a [] to the options variable name? Normally this wouldn't be a problem for me, but when I do the same thing and simulate a server request in my lab test like this:
var test = [..etc..]
// Simulate POST request
var serverOptions = {
method: 'POST',
url: '/create',
payload: {
question: 'Question',
options: test
}
};
It shows that the variable name received is just "options", not "options[]". How can I get jquery to stop adding the [] to the variable name when POSTing? Thanks

How to change Ajax request type and data

I'm using jQuery DataTables and I have a table that is loading data via an Ajax request. The Ajax source is being set at initialization.
However, I would now like to change the request type to a POST and include a data object before I force an Ajax reload.
I am doing something like this, but it doesn't work:
dt.ajax.type = 'POST';
dt.ajax.data = {<some data here>};
dt.ajax.reload();
I am only able to change the Ajax source URL, but that doesn't need to change.
You can use ajax option to define a function to call $.ajax method as shown below:
$('#example').dataTable( {
"ajax": function (data, callback, settings) {
if(some_condition){
data.param1 = "A";
data.param2 = "B";
}
$.ajax( {
"dataType": "json",
"type": (some_condition) ? "GET" : "POST",
"url": "/json.php",
"data": data,
"success": callback
});
}
});
This function will be called on initialization and every time you call ajax.reload().

How to construct the POST data values in an AJAX call?

i've this piece of code that performs an AJAX call
$.ajax({
url : 'inviaCommento.php',
type : 'POST',
data : {page: page, category: category}
dataType : 'json',
success : function (msg)
//...and so on
The problem is that i want to check if a search parameter is set, if yes i've to add the word to the data parameters.
The question is: can i costruct the data parameters before the call appendig values to it?
Something like this:
if $('#searchBtn').val()!=''
{
data.append(search: $('#searchBtn').val())
}
Yeah, just create an array.
var data = {something: [], page: page, category: category, somekey: "default"};
data.something.push("a");
data.something.push("b");
if (...) {
data.somekey = "new value";
}
$.ajax({
...
data: data
});
Yup, but data isn't a list, it's an object, so you just assign to the appropriate key.
var data = {page:page}; // ... current value of data: param in the $.ajax call
if($('#searchBtn').val()!=='')
{
data.search= $('#searchBtn').val();
}
You'd put this above the $.ajax() call.

How to make a successful JSON call from Javascript

I am baffled by this for very long now. I want to gain this precious knowledge of making JSON call properly. Help me Humans.
So I'm making a call exactly like this:
$.ajax({
type : "POST",
url : "http://quote.mythicalQuotes.com/unicorn/service/historical/json?callback=callme&symbols=APPL",
dataType: "text",
cache : false,
data : My_Array,
error : function(request,error){alert(request+" "+error); },
success : function(data)
{
alert("Response" + data);
}//success
}).fail(function(textStatus, errorThrown) { alert("error Error");
console.log("The following error occured: "+ textStatus, errorThrown); });
But it fails and throws 'error' alert. Good Coding!
Now pasting "http://quote.mythicalQuotes.com/unicorn/service/historical/chart/lite/json?callback=callme&symbols=APPL" on my browser URL gives me nice JSON of format:
callme(
{
"SYMB" : [
{
"DESCRIPTION" : "APPL,
"BARS" : {
"CB" :[
{
"lt" : "09-01-2011::20:00:00",
"op" : "16.31",
"cl" : "15.22",
"hi" : "16.45",
"lo" : "14.72",
"v" : "17768019"
},
{
"lt" : "09-02-2011::20:00:00",
"op" : "15.22",
"cl" : "14.22",
"hi" : "19.45",
"lo" : "10.72",
"v" : "17768000"
}
]
}
]
})
So what atrocity am I doing here which is provoking my anger toward this particular Javascript semantics/syntactics?
Couple of reasons I thought which might cause this.
1. Same origin policy.
2. Wrong JSON format being return.
3. Stupidity of my code.
Please help.
This is a JSONP-type response. Add dataType: jsonp to the JQuery AJAX request. Since you're also specifying the callback function explicitly, add jsonpCallback: callme also. See the JQuery docs for more info (scroll down to the "dataType" section).
$.ajax({
dataType: "jsonp",
jsonpCallback: "callme",
// ...
success: function(data) {
alert(data); // should show the JSON: { "SYMB" : ... }
}
});
You mentioned the cross-domain policy; the JSONP spec is a workaround for this policy blocking cross-domain requests. The idea is that, rather than returning data, the server returns a Javascript snippet containing data. The client then executes the returned function to retrieve the data. The JQuery ajax method has built-in functionality to handle all this "behind the scenes".

Categories

Resources