Using one of the many options defined at http://api.jquery.com/jQuery.ajax/ (or anywhere else) can I map the incoming data to a specific data type rather than the default generic object that is usually returned?
My usual method is to "convert" the generated object by grabbing each property and placing it into the constructor for the new object that I really want to use. Then, I just forget about the old object. I would imagine that there is a much more efficient way to do this.
I came up with/found a few ideas such as simply adding methods to each of the returned objects. It works well, but I just have to know if there is an even more efficient method.
So you're saying that you have code like the following:
function Pirate(name, hasParrot)
{
this.name = name;
this.hasParrot = hasParrot;
}
and the server is sending this JSON data:
{
name: "Blackbeard",
hasParrot: true
}
which jQuery is converting to a plain object, right?
If that's the case, you can use a custom datatype to parse the server's data directly into a Pirate object, like so:
// First define the converter:
jQuery.ajaxSetup({
converters: {
"json pirate": function(obj) {
if(!obj.name || typeof obj.hasParrot === "undefined")
{
throw "Not a valid Pirate object!";
}
else
{
return new Pirate(obj.name, obj.hasParrot);
}
}
}
}
// Then use it!
$.ajax("http://example.com/getPirate", {
data: {id: 20},
dataType: "pirate",
success: function(pirate){
console.log(pirate instanceof Pirate); // Should be true
}
});
Edit: If you really want to skip the step of converting to JSON, you could could replace "json pirate" above with "text pirate" and write your own parser for the raw text returned by the ajax call.
Related
I'm sending a GET request with jQuery
$.get("/index.html", /*Adding '?update' to the request*/ "update",
function (data) {/* Enter code here */}, "html");
where data is my server's response. I'm sending back a simple script like alert() so the 'data' variable equals <script> alert("Hello world!") </script>.
I need a way to automatically execute the script. I could just .append(data) to an element but I'm having multiple appends so that isn't really practical.
What is the easiest and the most practical way of executing the script?
Either .append it, like you said, or use eval(data), but then you'd have to get rid of the <script></script>. You can supply eval() a piece of Javascript code and it will execute that.
Please be aware that using eval should be avoided at all costs.
I did some crazy stuff in a case like this but you may think it is extreme. In my case I had to store some functions in localStorage and execute them by history state ( when user goes back/forth ). I have created a json object similar to
{obj:'myObject', fn: 'myfn', args: myArgs}
then stored this data base64 encoded. then when I need it back, I simply decoded content and
window.[data.fn].[data.obj].apply(null,data.args)`
did the trick without exposing too much data and not using eval. Eval comes from Evil so I would stay away. =)
UPDATE
So in my case all main core functions are json objects at window namespace similar to ( not actual content but an sample)
Member = {
initialize: function (){
//some process
},
render:function(memberId, selector){
//Some process
},
//...etc }
So when I store each item it, I used something similar to
var data = {obj: 'Member', fn: 'render', args: [1,'#member-block']}
then encoded version will be
localStorage.setItem('data', btoa(JSON.stringify(data)));
dmFyIGRhdGEgPSB7b2JqOiAnTWVtYmVyJywgZm46ICdyZW5kZXInLCBhcmdzOiB7bWVtYmVySWQ6MSwgc2VsZWN0b3I6ICcjbWVtYmVyLWJsb2NrJ319
Then when I need to call back
var data = JSON.parse(atob(localStorage.getItem('data'));
would return my original data object. Since the main functions in my case are in window namespace.
if (typeof window[data.obj]!=='undefined') { // same as window.Member
if (typeof window[data.obj][data.fn]!=='undefined' && typeof window[data.obj][data.fn]!=='function' ) { // make sure fn is defined and is a function
window[data.obj][data.fn].apply(null, data.args);
// we pass same arguments to function call with apply.
// `apply` will give us option to add arguments dynamically without knowing its size.
// it can be null any number of arguments that needed for that function.
}
}
I'm trying to create a custom component loader within knockout but I'm struggling with the view model. Essentially I want to remotely go grab both the HTML template and the JavaScript view model, but in this instance I don't want to use a traditional AMD module loader.
I've managed to get some of this working, specifically loading the HTML template but I can't figure out how to load the view model. Before I start here's my directory structure:
-- index.html
-- customerLoader.js
-- comps
-- myCustom.html
-- myCustom.js
So I've created my component loader like so. getConfig basically takes the name of the component and turns that into a path for the viewModel and the html template.
var customLoader = {
getConfig: function(name, callback) {
callback({ template: "comps/" + name + ".html", viewModel: "comps/" + name + ".js" });
},
loadTemplate: function(name, templateConfig, callback) {
console.log("loadTemplate", name, templateConfig);
$.get(templateConfig, function(data) {
callback(data);
});
},
loadViewModel: function(name, templateConfig, callback) {
console.log("loadViewModel", name, templateConfig);
$.getScript(templateConfig, function(data) {
callback(data);
});
}
};
ko.components.loaders.unshift(customLoader);
This successfully makes a request to load the template, which brings back some basic content. What I'm struggling with is the view model. I'm not sure what should be in the target of my JavaScript file?
I assumed that I'd want to return a function that would take some parameters, most likely a params object. However if I try and do this I get an error, telling me the JavaScript is invalid:
Uncaught SyntaxError: Illegal return statement
This is the current content I've got that is producing this error:
return function(params) {
console.log("myCustom.js", name, viewModelConfig);
// Add a computed value on
params.bookNum = ko.computed(function() {
switch(this.title()) {
case "A": return 1;
case "B": return 2;
case "C": return 3;
default: return -1;
}
});
//ko.components.defaultLoader.loadViewModel(name, viewModelConstructor, callback);
};
So ultimately I'm not sure how to achieve this, but I guess there are 3 basic questions that explain the gaps in my understanding:
What should my "view model" JavaScript file contain exactly? A function? An object? etc...
Do I need to call the ko.components.defaultLoader.loadViewModel at all?
Within my customLoader what should loadViewModel() be doing with the result of the jQuery callback? I'm not sure if I get back a JavaScript object, or just a string?
I'm open to achieve this in a different way if need be (e.g. not using jQuery but getting files a different way), but I don't want to use a module loader (e.g. require.js/curl.js in this instance).
First lets figure out what is happening...
From the docs:
This ($.getScript()) is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
dataType: "script",
success: success
});
And from jQuery.ajax():
...
dataType: ...
"script": Evaluates the response as JavaScript and returns it as plain text.
So your code is fetched, evaluated and then would have been returned as text, but evaluation first fails because you can't return if you're not within a function.
So what can be done? There are several options:
Use a module loader.
jQuery isn't a module loader, and as such it doesn't have the ability to parse fetched code and create a value / object from that code. A module loader is designed specifically for this task. It will take a script written in a specific pattern and "evaluate" it into a value (typically an object with 1 or more properties).
Change your script to a legal script
Because it's illegal to have a return statement in global code, your current code fails. You could however create a named function (or a variable with a function expression) and then use that name to reference that function. It could look like this:
function myCreateViewModel(param) {
// whatever
}
And the usage would be:
$.getScript(templateConfig, function() {
callback(myCreateViewModel);
});
The downside here is that if you ever go through that code path twice in the same page, your script will overwrite the old declaration. That might not ever be a problem, but it feels dirty.
Not use $.getScript(), use $.ajax() (or $.get()) with dataType: 'text' and evaluate yourself.
Remove the return from your code, and wrap it with an eval(). It will be evaluated as a function expression, the return value of the eval will be your function, and you could pass that directly to the callback:
$.get({
url: templateConfig,
dataType: 'text',
success: function(text) {
callback(eval(text));
}
});
This will work, but it will use the frowned upon eval(), which is exposing you to various risks.
I have a JSON response like this:
google.friendconnect.container["renderOpenSocialGadget"](
{
height: 200,
url: "http://username.github.io/",
"view-params": {"style":"light","url":"https://www.facebook.com/username","height":"258"},
"prefs": {"style":"light","url":"https://www.facebook.com/username","height":"258"}
}, skin);
I want to reach the values such as height, url, view-params but couldn't.
I tried this but it didn't worked:
console.log(google.friendconnect.container["renderOpenSocialGadget"].url);
The expression google.friendconnect.container["renderOpenSocialGadget"]( is equivalent to google.friendconnect.container.renderOpenSocialGadget(
Given that, we see that this is a method of an object, getting a JSON object and an additional parameter (skin) as parameters.
As the object is somehow "anonymous" parsed directly in to the function call, you can't access it anymore, once the function has consumed it.
Check, if google.friendconnect.container has getter methods (they usually have ...) by console.log(google.friendconnect.container).
EDIT
Just an Idea: you might catch the call and pass it over:
google.friendconnect.container["MyrenderOpenSocialGadget"] =
google.friendconnect.container["renderOpenSocialGadget"];
google.friendconnect.container["renderOpenSocialGadget"] = function(obj, skin) {
// do what you want with obj
console.log(obj.url);
//call original
google.friendconnect.container["MyrenderOpenSocialGadget"](obj, skin);
});
How to create list of object in jquery ?
Example:
Object name: rowdataObject having properties.
NOw, i want to create list of rowdataObject and pass to MVC.
Please suggest me how to create list of object in javascript and pass as argument in controller.
Thanks
<html>
<head>
<script type="text/javascript">
$(function() { // this is jQuery's version of `document.onload = function` which basically means, "start doing this when page is loaded"
// an Object in jQuery is extremely simple in nature
var obj = {}; // this is officially an object
// add to the object by simply creating properties
obj.prop1 = "This property is a string";
// add inner objects just as easy
obj.class1 = { prop1: "This inner object now has it's own property" }
// to pass this to a "controller" in jQuery, you will use a form of $.ajax
$.ajax({ // here you start creating ajax options
type: 'POST', // makes this retrievable via POST on server side, exp: $_POST['keyName']
data: JSON.stringify({ keyName: obj }), // easiest way to send data as key|value
url: 'http://www.example.com' // here you need the url to your controller
}) // now, use jQuery chainability to see results returned from controller
.done(function( data, textStatus, jqXHR ) {
// this function will fire only if the controller makes a successful return
/* do work, exp: */
console.log(data); // this would show the results of what the controller returned in your browser's developer console
})
})
</script>
</head>
<body>
References
JS Object
$.ajax
jQuery's Chainability
JSON
I have a $.get() statement, which returns this (result from a console.log()):
{"desc":"asdasda","dateD":"2012-08-31","dateE":"2012-09- 01","image":"fasdasdasd","categorie":"3"}
Now when I try, in Javascript, to manipulate the array, everything holds an undefined or null value:
var image = data.image;
desc = data.desc;
dateD = data.dateD;
dateF = data.dateE;
image = data.image;
categorie = data.categorie;
Note: the DateF= data.dateE is not a mistake.
Note2: Those statements are all held within the function (data){} function contained in the $.get().
All those assignments return undefined. What am I doing wrong? I have read and re-read the official jQuery doc, without success.
Make sure you set the dataType of the return to json.
If you don't do this, the result data may be a string and you will need to use JSON.parse(data) to turn it into a usable object.
For example:
$.get(url, getData, function(data){
//your fn...
}, 'json');