I am not sure why this isn't working. I want to show the post title, excepts on my blog page but I am not getting any of the objects displayed. This is my code:
$(document).on('pagebeforeshow', '#blogposts', function() {
//$.mobile.showPageLoadingMsg();
$.ajax({
url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=",
dataType: "json",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() { $.mobile.showPageLoadingMsg(true); },
complete: function() { $.mobile.hidePageLoadingMsg(); },
success:function(data){
console.log(data.posts);
alert (data.posts.length);
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
});
This is what my console shows:
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
1: Object
2: Object
3: Object
4: Object
When I expand the first object, I see the different elements I want. How so I expand down each object to get the desired output.
Those are also objects, try iterating through them:
console.log(data.posts);
for (var i = 0; i < data.posts.length; i++) {
//Just the title
console.log(data.posts[i].title);
//Iterate all the keys
for (var key in data.posts[i]) {
console.log(data.posts[i][key]);
}
}
Related
Is it possible to call a function in success callback of ajax request?
For example I have something like that :
constructor(private http: HttpClient,private serviceComposition: CompositionService) { }
[...]
save() {
var isValid = this.isValidCompo();
if (true) {
var toSend = JSON.stringify(this.setupComposition);
$.ajax({
url: "/api/setup/composition/addSetupComposition",
type: 'POST',
dataType: "json",
data: 'setupComposition=' + toSend,
success:function(response){
//console.log("Success Save Composition");
},
error: function(XMLHttpRequest,textStatus,errorThrown){
console.log("Error Save Compo");
}
}).done(function(data){
this.serviceComposition.changeValue(isValid);
})
}
}
I want to call a function of my service (named : changeValue() ) if my ajax request is a success.
But I have this error message : core.js:12632 ERROR TypeError: Cannot read property 'changeValue' of undefined
Do you know if it's possible to resolve that ?
I am suspecting this binding is going wrong in call backs,
prefer using arrow function because of "this" operator binding.
if (true) {
var toSend = JSON.stringify(this.setupComposition);
$.ajax({
url: "/api/setup/composition/addSetupComposition",
type: 'POST',
dataType: "json",
data: 'setupComposition=' + toSend,
success:function(response){
//console.log("Success Save Composition");
},
error: function(XMLHttpRequest,textStatus,errorThrown){
console.log("Error Save Compo");
}
}).done((data) => {
this.serviceComposition.changeValue(isValid);
})
}
if not u can store this reference in a variable and call it
var self = this;
if (true) {
var toSend = JSON.stringify(this.setupComposition);
$.ajax({
url: "/api/setup/composition/addSetupComposition",
type: 'POST',
dataType: "json",
data: 'setupComposition=' + toSend,
success:function(response){
//console.log("Success Save Composition");
},
error: function(XMLHttpRequest,textStatus,errorThrown){
console.log("Error Save Compo");
}
}).done(function(data){
self.serviceComposition.changeValue(isValid);
})
}
Use an arrow function to access this of your parent scope. In your example, this is referring to your jQuery XHR object.
So:
// [parent scope]
$.ajax({
...
}).done((data) => {
// [child scope]
// `this` now refers to [parent scope], so the following is valid
this.serviceComposition.changeValue(isValid);
});
Another common practice prior to arrow functions (ES6) would've been assigning a const self = this; variable in the [parent scope] area to be accessed in the child method. Either method works the same.
Also check out the MDN docs on this. It's a confusing topic for many.
I have this code where i am trying to retrieve data from model.findall() and display in UI as table
model.js
define(['jquery', 'can'], function ($, can) {
var serviceModel = can.Model.extend({
findAll: function (params,servicename) {
return $.ajax({
type: 'POST',
dataType: 'JSON',
contentType: 'application/json',
url: 'data/+ servicename',
success: function (data) {
console.log("Success ");
},
error: function () {
console.log("Error");
}
});
}
}, {});
return serviceModel;
});
controller.js
serviceModel.findAll(params,"SP_table", function(data) {
if (data.status === "success") {
$('#idtable').dataTable().fnClearTable();
$('#idtable').dataTable().fnAddData(data.result);
}else{
alert("inside alert");
}
});
issue is in serviceModel.findAll() i am unable to get data inside serviceModel.findAll() because data is in the form of stored procedure or macro, which i am getting using "servicename" from function above
please let me know how to resolve this issue.
You can access the raw xhr data from the ajax call and convert it to an appropriate format by overriding the parseModels method:
https://canjs.com/docs/can.Model.parseModels.html
Overwriting parseModels If your service returns data like:
{ thingsToDo: [{name: "dishes", id: 5}] } You will want to overwrite
parseModels to pass the models what it expects like:
Task = can.Model.extend({ parseModels: function(data){ return
data.thingsToDo; } },{}); You could also do this like:
Task = can.Model.extend({ parseModels: "thingsToDo" },{});
can.Model.models passes each instance's data to can.Model.model to
create the individual instances.
In their example above, the response is a nested JSON: in yours, it is your procedure or macro. You have the opportunity here in parseModels to rewrite the response in the appropriate format.
I have an Odata result like this
{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5", "PatID":null,
"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1
}
and i tried to get this result via kendo.ui.datasource:
newPatient = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: url + '/MasterPatient(guid\'00000000-0000-0000-0000-000000000000\')', // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
schema: {
data: function (data) {
return data;
},
total: function (data) {
return data['odata.count']
},
}
});
newPatient.fetch(function () {
kendo.bind($('#newPatientTab'), newPatient);
});
But not sure why it always throw error :
Uncaught TypeError: Object [object global] has no method 'slice'
Please help me. Thanks
In Kendo UI, DataSource works only with arrays. If you can change the server response to send something like this
[{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5","PatID":null,"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1}]
then it will work fine.
N.B. It's in array format.
OR
You can wrap the single object into array on the client side, inside data function of the schema.
schema: {
data: function(server-response) {
return [server-response];
}
}
The Kendo team should put more time on good Documentation.
That means you are not using an odata source from the backed. You need to think about here do you really need a kendo odata source from the client in this case if your back-end not supported odata correcly.
See this response from odata url, http://services.odata.org/Northwind/Northwind.svc/?$format=json
It should return an array of object in the value field.
If you can't change the backed what you can do is to format the data in the Schema.data function
schema: {
data: function (data) {
return [data];
},
I am new with knockout and mvc, so I need some help, my question is
my dropdown list is populating successfully from server, and on clicking save button calls Save method in controller. But problem is that in controller I am unable to receive json data i.e it is null. here is my code in view
var initialData = #Html.Raw( new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
var viewModel = function(){
var self = this;
self.HomeAgencies = ko.observableArray(initialData.HomeAgencies);
self.selectedOrgUnit = ko.observable();
self.Save = function () {
$.ajax({
url: "#Url.Action("Save")",
type: "POST",
data: ko.toJSON(this),
contentType: "application/json; charset=utf-8",
dataType:"json",
success: function(result) {alert(result.message)}
});
}
}
var vm = new viewModel();
ko.applyBindings(vm);
Where in controller i have following code
public JsonResult Save(string someData)
{
var message = string.Format("Saved {0} ", "successfully");
return Json(new { message });
}
string someData is always null, where I am expecting some json data.
Try to replace this to self in data and introduce field name and remove contentType.
$.ajax({
url: '#Url.Action("Save")',
type: 'POST',
data: { someData: ko.toJSON(self) },
dataType: 'json',
success: function (result) { alert(result.message); }
});
In your case context of the method can be changed from your object to html element that invoked them method or to window.
issue resolved. Problem was at controller side, in Action of controller pass the same model class instead parsing json manually.
how come when I send ajax request like this everything works
$(".btnDeleteSong").click(function () {
var songId = $(this).attr('name');
$.ajax({
type: 'POST',
url: "/Home/DeleteSong/",
data: { id: songId },
success: ShowMsg("Song deleted successfully"),
error: ShowMsg("There was an error therefore song could not be deleted, please try again"),
dataType: "json"
});
});
But when I add the anonymous function to the success It always showes me the error message although the song is still deleted
$(".btnDeleteSong").click(function () {
var songId = $(this).attr('name');
$.ajax({
type: 'POST',
url: "/Home/DeleteSong/",
data: { id: songId },
success: function () { ShowMsg("Song deleted successfully"); },
error: function () {
ShowMsg("There was an error therefore song could not be deleted, please try again");
},
dataType: "json"
});
});
what if i wanted few things on success of the ajax call, I need to be able to use the anonymous function and I know that's how it should be done, but what am I doing wrong?
I want the success message to show not the error one.
function ShowMsg(parameter) {
$("#msg").find("span").replaceWith(parameter);
$("#msg").css("display", "inline");
$("#msg").fadeOut(2000);
return false;
}
Make sure your action is returning Json data.
"json": Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.)
http://api.jquery.com/jQuery.ajax/
Your action method should surely return Json data. I have the similar code see if that helps.
public ActionResult GetAllByFilter(Student student)
{
return Json(new { data = this.RenderPartialViewToString("PartialStudentList", _studentViewModel.GetBySearchFilter(student).ToList()) });
}
$("#btnSearch").live('click',function () {
var student = {
Name: $("#txtSearchByName").val(),
CourseID: $("#txtSearchByCourseID").val()
};
$.ajax({
url: '/StudentRep/GetAllByFilter',
type: "POST",
data: JSON.stringify(student),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(result) {
$("#dialog-modal").dialog("close");
RefreshPartialView(result.data);
}
, error: function() { alert('some error occured!!'); }
});
});
Above code is used to reload a partial view. in your case it should be straight forward.
Thanks,
Praveen