JS / jQuery: невозможно получить доступ к свойствам объекта, возвращенного при вызове ajax

Question

Я совершенно новичок в JS и jQuery.

У меня проблема с доступом к свойствам объекта, возвращенного методом jQuery ajax.

Как вы можете видеть из приведенного ниже кода, я пытаюсь использовать свойства объекта 'data' в функции обратного вызова success для создания строки таблицы, которую затем пытаюсь добавить в таблицу.

$('#add_comp').submit(function(){

        var startDate = $('#form_startDate').val();
        var initPrize = $('#form_init_prize').val();
        var active    = $('#form_active').val();

        var dataString = 'startDate=' + startDate + '&startPrize=' + initPrize + '&active=' + active;

        $.ajax({
            type: 'POST',
            url: "/admin/competition/add-competition",
            data: dataString,
            success: function(data, textStatus, xhr){
                console.log(data);
                console.log(data.startDate);
                console.log(data[startDate]);
                console.log(data['startDate']);

                var tr = '\n\
                          '+ data["startDate"] +'\n\
                          '+ data.active +'\n\
                          '+ data.currentPrize +'\n\
                          ';
                $('#competition_table').find('tr:last').after(tr);

            },
            error: function(){
                alert('There has been an error, please consult the application developer.');
            }

        });

Функция успеха немного запутана, так как я пытаюсь использовать различные способы доступа к свойствам объекта данных.

Первая строка console.log (data) возвращает следующее в консоли firebugs:

{"competitionId":null,"startDate":"08\/02\/2010","endDate":null,"winner":null,"participantPool":"4c6729aa8c8fb","active":1,"startPrize":"350","currentPrize":"350"}

Это подтверждает, что объект данных существует и имеет правильные свойства.

Полагаю, я должен иметь возможность доступа к отдельным свойствам, используя data.propertyName, однако все последующие вызовы console.log () возвращают undefined.

Как правильно получить доступ к этим свойствам и использовать их для построения строки таблицы?

Answer 1

Чтобы прочитать свойства объекта data, оба data.startDate и data["startDate"] должны работать.

Как указал jaywon, проблема в том, что ваш объект данных - это строка, а не объект,Вы можете подтвердить это, добавив еще одну console.log строку, например:

console.log(typeof data);

, которая выведет «string» вместо «object».Вы можете распечатать свойства строкового объекта обычным способом, например, количество символов:

console.log(data.length);

Чтобы заставить JQuery анализировать JSON для вас, вам нужно либо установить свойство dataType какописанный jaywon, или включите этот заголовок типа контента, когда вы обслуживаете свой json:

Content-Type:text/json

Если вы включите этот заголовок с сервера, то ваш пример кода выведет правильные свойства на консоль.

Наконец, чтобы добавить строку в вашу таблицу, вам нужно добавить строку таблицы вместо простой текстовой строки, поэтому вы должны изменить строку var tr = ... на эту:

var tr = '<tr>' +
             '<td>' + data.startDate    +'</td>' +
             '<td>' + data.active       +'</td>' + 
             '<td>' + data.currentPrize +'</td>' +
         '</tr>';

Answer 2

Вы пытались установить свойство dataType вашего $.ajax вызова, чтобы ваш вызов знал, какого ответа ожидать?Когда вы устанавливаете для свойства dataType значение json , jQuery знает, как проанализировать ответ JSON в объект, иначе он не узнает, получаете ли вы обратно текстовую строку, HTML или JSON и т. Д... с сервера.

Это подтверждает, что объект данных существует и имеет правильные свойства. Фактически, это только подтверждает, что ваша переменная data содержит строку, это не такне может подтвердить, что он был проанализирован в объект с доступными свойствами.

Попробуйте это:

$.ajax({
            type: 'POST',
            url: "/admin/competition/add-competition",
            data: dataString,
            dataType: "json" //add this line
            success: function(data){ //only the data object passed to success handler with JSON dataType
                console.log(data);
                console.log(data.startDate);
                console.log(data[startDate]);
                console.log(data['startDate']);

                var tr = '\n\
                          '+ data["startDate"] +'\n\
                          '+ data.active +'\n\
                          '+ data.currentPrize +'\n\
                          ';
                $('#competition_table').find('tr:last').after(tr);

            },
            error: function(){
                alert('There has been an error, please consult the application developer.');
            }


        });

Кроме того, вы можете самостоятельно проанализировать ответ JSON с помощью внешнего скрипта, например JSON2 .

Вот хорошая ветка с примерами других проблем, с которыми вы можете столкнуться на сервере, возможно, не отправив обратно правильный заголовок ответа. jQuery не будет анализировать мой JSON из AJAX-запроса