Как я могу преобразовать строку запроса или карту объекта JSON в один объект JSON с помощью jQuery? - PullRequest
Новая
       13

Как я могу преобразовать строку запроса или карту объекта JSON в один объект JSON с помощью jQuery?

2 голосов
/ 26 апреля 2009

Для этого примера предположим, что у меня есть список месяцев в форме, каждый с флажком рядом с ними. Я ищу помощь в выполнении одной из двух вещей:

  1. Преобразование строки запроса (например, "January=on&March=on&September=on") или
  2. Конвертировать карту объекта: [{ January: 'on' },{ March: 'on' },{ September: 'on' }]

для одного объекта JSON: { January: 'on', March: 'on', September: 'on' }

Я понимаю, что первая карта - это уже JSON, но вместо массива объектов я бы хотел, чтобы это был один объект JSON. Я могу построить карту с помощью $('form').serializeArray(); и строку запроса с помощью $('form').serialize();.

Реализация .serialize () в API jQuery просто: 

serialize: function() {
    return jQuery.param(this.serializeArray());
},

, поэтому я мог обработать либо первый, либо второй ответ.

Причина, по которой я хотел бы сделать это, заключается в том, что я переключаюсь с PrototypeJS на jQuery, а в PrototypeJS это было так просто: 

Object.toJSON(Form.serializeElements($('myform'), true));

Итак, кто-нибудь знает о плагине JSON (я бы хотел придерживаться ТОЛЬКО jQuery), который мог бы легко это сделать, или о простом методе достижения желаемого результата? Спасибо!

Ответы [ 5 ]

10 голосов
/ 19 марта 2011

Вы можете попробовать это 

String.prototype.QueryStringToJSON = function () {
href = this;
qStr = href.replace(/(.*?\?)/, '');
qArr = qStr.split('&');
stack = {};
for (var i in qArr) {
    var a = qArr[i].split('=');
    var name = a[0],
        value = isNaN(a[1]) ? a[1] : parseFloat(a[1]);
    if (name.match(/(.*?)\[(.*?)]/)) {
        name = RegExp.$1;
        name2 = RegExp.$2;
        //alert(RegExp.$2)
        if (name2) {
            if (!(name in stack)) {
                stack[name] = {};
            }
            stack[name][name2] = value;
        } else {
            if (!(name in stack)) {
                stack[name] = [];
            }
            stack[name].push(value);
        }
    } else {
        stack[name] = value;
    }
}
return stack;
}

Строка запроса 

    href="j.html?name=nayan&age=29&salary=20000&interest[]=php&interest[]=jquery&interest[1]=python&interest[2]=Csharp&fan[friend]=rangan&fan[family]=sujan&sports[1]=cricket&sports[2]=football";

использование 

alert(href.QueryStringToJSON().toSource())

выход 

({name:"nayan", age:29, salary:20000, interest:["php", "python", "Csharp"], fan:{friend:"rangan", family:"sujan"}, sports:{1:"cricket", 2:"football"}})
3 голосов
/ 26 апреля 2009
Предложение

kgiannakakis обойти карту было хорошей отправной точкой, хотя я не чувствую, что это считается ответом на мой первоначальный вопрос. После нескольких часов стука головы я согласился на это, что позволяет вам сериализовать элементы на основе настраиваемого атрибута (я не хотел соглашаться на необходимость использовать атрибут 'name' в моих элементах формы, который требуется jQuery ). Я также начал использовать библиотеку JSON из json.org для того, чтобы структурировать объект, который я создаю. Функция serializeToJSON моего плагина - это то, что я искал в качестве ответа на мой вопрос, остальное просто exta.

Примечание : это для клиента, поэтому имена и атрибуты 'CustomXXX' были заменены тем, что они на самом деле 

jQuery.fn.extend({
    serializeCustomPropertyArray: function() {
        return this.map(function() {
            return this.elements ? jQuery.makeArray(this.elements) : this;
        }).filter(function() {
            return jQuery(this).attr('CustomAttribute') &&
                (this.checked || /select|textarea/i.test(this.nodeName) ||
                        /text|hidden|password|search/i.test(this.type));
        }).map(function(i, elem) {
            var val = jQuery(this).val();
            return val == null ? null : jQuery.isArray(val) ?
                jQuery.map(val, function(val, i) {
                    return { name: jQuery(elem).attr('CustomAttribute'), value: val };
                }) : { name: jQuery(elem).attr('CustomAttribute'), value: val };
        }).get();
    },
    serializeToJSON: function() {
        var objectMap = this.serializeCustomPropertyArray();
        var objectJson = new Object;
        jQuery.each(objectMap, function() {
            objectJson[this.name] = (this.value !== null) ? this.value : 'null';
        });
        return JSON.stringify(objectJson);
    }
});

Это можно назвать как: 

$('#fields').find(':input[CustomGroup="Months"]').serializeToJSON();

Предполагается, что ваш документ выглядит примерно так: 

<div id="fields">
   <input type="checkbox" CustomGroup="Months" CustomAttribute="January" />January<br />
   <input type="checkbox" CustomGroup="Months" CustomAttribute="February" />February<br />
   ...
</div>

Построенный JSON выглядит следующим образом: 

{ January: 'on', February: 'on', ... }
0 голосов
/ 13 сентября 2011

Вы также можете использовать плагин parseQuery для создания объекта из сериализованных элементов. 

var contact = $.parseQuery($("#step1 *").serialize());
0 голосов
/ 04 марта 2010

Я знаю, что вы пытаетесь превратить строку запроса в объект JSON, но, возможно, вам может быть интересно перейти непосредственно от html-формы к объекту JSON (без необходимости указания действительно сложных атрибутов имени). Если это так, проверьте JSONForms: http://code.google.com/p/jsonf/

Отказ от ответственности: я запустил проект jsonforms. Это все еще молодо, но лично я думаю, что это круто!

0 голосов
/ 26 апреля 2009

Вы можете пройти карту объекта, используя служебную функцию $. Each . 

$(function() {
    map = [{ January: 'on' },{ March: 'on' },{ September: 'on' }];
    $.each(map, function() {
       $.each(this, function(key, val) {alert(key + " = " + val);});;
    });
});

Первый получает все объекты массива. Со вторым вы можете получить ключ и значение вашего объекта.

...