Ajax - Parse oData Response - ajax

I have an ajax call that gets data from a REST api.
$.ajax({
url: "http://localhost:52139/odata/WEB_V_CIVIC_ADDRESS",
data: { enteredText: "'" + $('#addressTextField').val() + "'" },
type: "GET",
dataType: 'json',
ContentType: "application/json",
success: function (data) {
alert(JSON.stringify(data));
response($.map(data.accountaddressList, function (item) {
return {
item: item.civicaddress,
value: item.accountNumber,
label: item.civicaddress
}
}));
},
error: function (data, xml, errorThrown) {
alert('Error loading address list: ' + errorThrown);
}
});
The odata returned from that call looks like:
{
"#odata.context":"http://localhost:52139/odata/$metadata#WEB_V_CIVIC_ADDRESS/AValues.Classes.Entities.AccountAddress","value":[
{
"#odata.type":"#AValues.Classes.Entities.AccountAddress","accountNumber":88887,"rowNumber":0,"civicaddress":"123 Fake St"
},{
"#odata.type":"#AValues.Classes.Entities.AccountAddress","accountNumber":88888,"rowNumber":0,"civicaddress":"321 Faker St"
}
]
}
So the current code throws an 'Undefined' error on the line: response($.map(data.accountaddressList, function (item) {
How do I map the 'civicaddress' and 'accountNumber' from each value in the odata response to 'item'?
Thanks.

I got it, needed to change it to response($.map(data.value, function (item)

Related

How to invoke another function using a parameter fetched JSON result of API call from AJAX

I Have to get ParentId from this function using JSON result and then invoke another function given below after this function:
public fetchLibraryDatafromSharePointList(clientID:string) {
debugger;
const reactHandler = this;
jquery.ajax({
url: `${this.props.siteurl}/_api/web/lists/getbytitle('MSAs')/items?$filter=ClientID eq '${clientID}'&$orderby=Modified desc`,
type: "GET",
headers:{'Accept': 'application/json; odata=verbose;'},
success: function(resultData2) {
reactHandler.setState({
items: resultData2.d.results
});
},
error : function(jqXHR, textStatus, errorThrown) {
}
});
}
Below is the function which has to be invoked on the success of above API and the parameter is coming in the JSON result of the previous call made:-
SetState is done by reactHandler variable
public fetchDatafromSharePointList(ParentID) {
debugger;
const reactHandler = this;
jquery.ajax({
url:`${this.props.siteurl}/_api/web/lists/getbytitle('MSASummaries')/items?
$filter=Parent eq ${ParentID}$top=1&$orderby=Modified desc`,
type: "GET",
headers:{'Accept': 'application/json; odata=verbose;'},
success: function(resultData) {
/*resultData.d.results;*/
reactHandler.setState({
items: resultData.d.results
});
},
error : function(jqXHR, textStatus, errorThrown) {
}
});
}
You can invoke another function in the success response of fetchLibraryDatafromSharePointList(clientID:string) after updating state. i.e:
reactHandler.setState({
items: resultData2.d.results
}, ()=>{
fetchDatafromSharePointList(your_parent_id_goes_here);
});

Syntax Error JSON file read with AJAX

I am getting a syntax error for the square bracket '[' from my JSON file. Given below is the JSON.
[
{
"Product Name":"CPE 10281",
"Application":"Tyres",
"Weight":150,
"Cost to Produce":5000,
"Grade":"A",
"Cost to Sell":40000,
"Strength":100
},
{
"Product Name":"CPE 10282",
"Application":"computers",
"Weight":250,
"Cost to Produce":4000,
"Grade":"H",
"Cost to Sell":25000,
"Strength":90
}
]
I am trying to use AJAX to read my JSON file.
$.ajax({
url: "dataProductJSON.json",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val) {
item.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
I am running my html from Eclipse with Apache Geronimo as the server.
Please Help.
You are missing a { in the below line
success: function (data)
Make it
success: function (data) {
Edit
You are having parsing the data incorrectly , do it as below
$.ajax({
url: "test.html",
dataType: 'json',
mimeType: "application/json",
success: function (data) {
var item = [];
$.each(data, function (key, val){
$.each(val, function (innerKey, innerValue){
item.push('<li id="' + innerKey + '">' + innerValue + '</li>');
});
});
$('<ul/>', {
'class': 'interest-list',
html: item.join('')
}).appendTo('body');
},
});
You need to use 2 loop , one for the array and the other to loop through the object property
I tried things and it is working fine

Simple jQuery / Ajax error

I have this code:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function () {
alert('could not process');
}
});
there is an error and alerts the error message could not process, so I tried to debug it like this:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function (jqXHR) {
alert('Error: ' + jqXHR.status + jqXHR.statusText);
}
});
which outputs:
200 OK
so if it is ok, why on earth is it executing the error: function. Confused, please help.
Your data string is incorrectly formatted, if you are intending it to be a JSON object. There was a previous question about this: Jquery passing data to ajax function
Instead, try:
data: JSON.stringify({custID: custID}),
The format is (key):(variable). My previous answer have placed quotes around the variable, which is not necessary.

asp.net mvc 3 json does not work

This is my jquery with json
$('#btnVerificationOk').click(function () {
var verId = $('#trans_verification_id').val();
var verCode = $('#trans_verification_code').val();
$.ajax({
url: '/Profile/CompleteTransactions',
type: 'POST',
data: { },
dataType: 'json',
success: function (result) {
alert(result);
},
error: function () {
alert('ERROR ERROR !!!!!!!!!!!!');
}
});
});
And My C# method:
[Authorize]
[HttpPost]
private JsonResult CompleteTransactions()
{
return Json("Done");
}
Its always alerts 'ERROR ERROR !!!!!!!!!!!!' i tried debugging but CompleteTransactions method is not firing
And this is my second json which is bellow and works good
$('#btnTransfareOk').click(function () {
var userName = $('#transfare_username').val();
var amount = $('#transfare_amount').val();
if (userName == '' || amount == '') {
$('#transfare_error_list').html('Please fill boxes.');
} else {
$.ajax({
url: '/Profile/TranfareMoney',
type: 'POST',
data: { ToUsername: userName, Amount: amount },
dataType: 'json',
success: function (result) {
$('#transfare_error_list').html(result.text);
$('#trans_verification_id').val(result.id);
$('#transfare_username').val("");
$('#transfare_amount').val("");
},
error: function () {
$('#transfare_error_list').html('Oops... Error.');
}
});
}
});
I'm not 100% sure, but shouldn't you controller action handler be public ?

Ajax Json multiple parameters

This code below sitting on a ASP.Net application on the Site.Mater....
I need to pass another two parameters from the default.aspx page, one asp:label and one asp:textbox
What is the easiest way to do that?
Thanks
<script type="text/javascript">
$(function () {
$(".tb").autocomplete({
source: function (request, response) {
$.ajax({
url: "TestWebService.asmx/FetchList",
data: "{ 'testName': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.Name
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
In your jQuery autocomplete, You need to change your data parameter to this:
data: "{ 'testName': '" + request.term + "' ,lbl: '" + $(".lblClass").text() + "' ,txt: '" + $(".txtClass").val() + "'}"
And then change your service method like this:
[WebMethod]
public List<string> FetchList(string testName, string lbl, string txt)
{
//...
}
Note:
.lblClass and .txtClass are classes for ASP:Lable and ASP:TextBox respectively.

Resources