How can I de-serialize back into the form? about jquery.serializejson HOT 6 CLOSED

You can't.

It would be an interesting exercise to write a function that can deserialize back into the form from the returned object... but I think you are trying to do something that is out of scope for this plugin.

I think you need something like a template binding. Maybe you should look into something like Rivets.js ?

from jquery.serializejson.

No. When you created entity with your plugin, the next thing you must think is how to edit your new entity.

Yes you can use plain methods such as server-side script to do this , but it's amazing to do this all in your plugin.

So I write a plugin below to do this, hope this helpful and can be included into your codes.

(function($){

    $.fn.deserializeJSON = function(s){

        $(this).find("input, select, textarea").each(function(){

            var o = s;
            var match, arrays;
            var name = this.name;

            if (match = name.match(/^(.*):([^:]+)$/)){
                name = match[1]
            }

            var names = []
            if(name.indexOf("[") > -1){

                names.push(name.substring(0, name.indexOf("[")));
                if(match=name.match(/\[([^\]]+)\]/g)){

                    for(var i=0;i<match.length;i++){
                        names.push(match[i].substring(1, match[i].length-1));
                    }
                }
            }else{

                names.push(name);
            }



            for(var i=0;i<names.length;i++){
                o = o[names[i]];
                if(o == null) return;
            }

            if(names.length>0 && o!=null){

                if($(this).is("[type=checkbox]")){
                    if($(this).attr("data-unchecked-value")){
                        if(o.toString() == $(this).attr("data-unchecked-value")){
                            if($(this).is(":checked")){
                                $(this).click();
                            }
                        }else{
                            if(!$(this).is(":checked")){
                                $(this).click();
                            }
                        }
                    }
                }else{
                    $(this).val(o);
                }
            }
        });
    };
})(jQuery);

from jquery.serializejson.

This is a good start, but in order to fully support deserialization, it should accept all the same options as when serialized (i.e. checkboxUncheckedValue or useIntKeysAsArrayIndex change the format of the serialized object), and also take into account the ":type" of each input if any. And what if the serialization was made with a custom parseWithFunction function? The user would have to create a reverse-function as well ...

I would also require a good test coverage to accept this in the plugin codebase... if you think about it, the solution is actually pretty complicated, since this plugin can serialize in many different ways.

For that reason, it's usually better to just write your own code to de-serialize, or just manually put back the values into the form with jQuery:

// Set the values of the object returned by serializeJSON back into the form
function deserializeJSON(obj, $form) {
    $form.find("input[name='my[nested][value]']").val(obj['my']['nested']['value']);
    $form.find("input[name='my[other][value]']").val(obj['my']['other']['value']);
}

// Serialize
var $form = $('form');
var obj = $form.serializeJSON();
obj.my.nested.value = "newstuff"; // modify your object
deserializeJSON(obj, $form); // set back into the HTML form 

But again, if what you want is a full 2-way binding, Rivets.js is a great solution. Take a look at this example: http://jsfiddle.net/nsisodiya/y3gDP/

from jquery.serializejson.

I agree with giter that it would be great to be able to deserialize the object.
Personally I am not at all looking for something like template-binding (as in Rivet.js), but being able to deserialize seems quite useful.

from jquery.serializejson.

@marioizquierdo Yes this is an early handy source, I may continue to complete this deserialize plugin when I finish current job ~ 2015.05.

Major reason that I need this deserialize plugin is that your plugin break the nature HTML elements' name attribute and add some suffix on name like "weight:number", maybe you can use some other friendly method like provide some conversion class such as "number","datetime", etc.

from jquery.serializejson.

I still think that this type of functionality should be implemented in a separate repository. Maybe named jquery.deserializeJSON?

Setting the values back into the form is something that most users don't need, and it would break the promise of keeping this plugin light. And it's not easy at all to support all the possible options and types.

Closing the issue for now.

from jquery.serializejson.