Неправильное форматирование выбранных вариантов - JQuery

Question

Мой второй выпадающий список заполнен каждой буквой данных, которые я возвращаю с моего сервера, а не каждым элементом.

Вот мой JQuery;

var selected_table = $("#id_TableName option:selected").text();
            $.get('/historicaldata/input_parameters/', { selected_table : selected_table }, function(data){
                for (var i = 0; i < data.length; i++) {
                    for (var key in data[i]) {
                        $('<option />', {
                            value: key,
                            text: data[i][key]
                        }).appendTo("#id_ColumnName");
                    }
                }
            });

Мои данные выглядят так, когда они возвращаются из моего представления после запроса GET;

{'option1': ['option1'], 'option2': ['option2'], 'option3': ['option3']}

Хотя я пробовал несколько похожих форматов, и результат тот же, поэтому я думаю, что вина в JQuery.

Спасибо!

Answer 1

Два вопроса:

1. Мне кажется, что ваш сервер не возвращает правильный Content-Type заголовок с ответом, поэтому jQuery не понимает, что это JSON, и автоматически десериализует его для вас. Таким образом, ваш цикл проходит по символам строки.

   Вы можете форсировать вопрос, добавив вызов jQuery.parseJSON ($.parseJSON если вы используете $ ярлык):

   data = jQuery.parseJSON(data);
   

   ... как первая строка обработчика успеха (показанного в контексте ниже), но лучшим вариантом будет исправить Content-Type сервер отправляет обратно. Тип контента, который сервер должен отправлять обратно application/json,

2. Ваш код ожидает получить массив, но из

   {'option1': ['option1'], 'option2': ['option2'], 'option3': ['option3']}
   

   ... вы цитировали, вы не отправляете обратно массив, вы отправляете обратно что-то вроде объекта JSON (но с недействительными кавычками, см. № 3 ниже). Как только вы исправите #3 ниже, вы можете просмотреть имена свойств, используя for (var propName in data) (propName будет "option1", "option2" и т. д., не в гарантированном порядке). Если вам нужен конкретный порядок, измените вывод на стороне сервера, чтобы вместо него вывести массив:

   ["option1", "option2", "option3"]
   

   ... а затем придерживаться вашей существующей петли.

3. JSON, который вы отправляете обратно, недействителен. JSON требует, чтобы имена свойств и строки были в двойных кавычках ("), а не одинарные кавычки ('). Так:

   {"option1": ["option1"], "option2": ["option2"], "option3": ["option3"]}
   

   ... или снова используйте массив:

   ["option1", "option2", "option3"]
   

Вот parseJSON вызов в контексте, но, опять же, было бы лучше, если бы сервер отправил обратно правильный Content-Type, и вам также придется обновить способ доступа к данным:

var selected_table = $("#id_TableName option:selected").text();
$.get('/historicaldata/input_parameters/', {
    selected_table: selected_table
}, function(data) {
    data = $.parseJSON(data);     // <====== Added
    for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
            $('<option />', {
                value: key,
                text: data[i][key]
            }).appendTo("#id_ColumnName");
        }
    }
});

Answer 2

Это ваш пример (вы получаете строку):

Демо: http://jsfiddle.net/5JNSz/

Если вы исправите свою строку, чтобы она стала правильной json и использовать JSON.parse() ИЛИ JQuery $.parseJSON:

Демо: http://jsfiddle.net/dv9Ly/

Примечание: объект не имеет length имущество.

Примерно так должно работать, если вы исправите проблему с типом контента:

for (var key in data) {
    $('<option />', {
        value: key,
        text: data[key][0]
    }).appendTo("#id_ColumnName");
}

Демо: http://jsfiddle.net/Vm7jQ/