Свойства объекта JavaScript не определены после запроса AJAX

Question

Я сделал вызов ajax, который возвратил строку json из вызова .Net JsonConvert.SerializeObject (), json автоматически анализируется в объект в браузере, но в настоящее время я не могу получить доступ к свойствам без "undefined "возвращается.

Моя текущая возвращаемая строка json (удаленная часть массива байтов):

"[{\"filename\":\"\",\"size\":6,\"csize\":\"       5.85 KB\",\"extfile\":\"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDA....AAAAAAAAAAAf//Z\"}]"

Я проверил это, и все нормально.

Мой javascript:

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data != null) {
                $("#ImgItem").attr("src", "data:image/png;base64,'" + data.extfile + "'");
            }
        }
    });
}

Я убедился, что это определенно объект. Я попытался получить доступ к data.extfile, data ["extfile"], передать extfile в виде байтового массива, а затем получить к нему доступ, но он всегда отображается как "undefined". В отчаянии я даже пытался получить доступ к индексам, перебирать объекты и т. Д. И все еще ничего.

У меня есть ощущение, что в строке json есть проблема, которая не позволяет ей правильно конвертироваться, но я не вижу ее, так как я мало работал с json. Может ли кто-нибудь указать, где я иду не так?

Решение

Javascript анализировал ответ в объект с единственным свойством «data.d», проанализировал data.d и правильно создал объект.

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data != null && data.d != null) {
                let imgData = JSON.parse(data.d);
                $("#ImgItem").attr("src", "data:image/png;base64," + imgData[0].extfile);
            }
        }
    });
}

Answer 1

в основном, если string, который вы вставили, является ответом (данными), при использовании JSON.parse() он преобразуется в массив, поэтому вы должны использовать его следующим образом.

const stringResponse = "[{\"filename\":\"\",\"size\":6,\"csize\":\"       5.85 KB\",\"extfile\":\"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDA....AAAAAAAAAAAf//Z\"}]"


const parsedResponse = JSON.parse(stringResponse);

console.log(parsedResponse)

const entry = parsedResponse[0];

console.log(entry.extfile)

так что в основном вам нужно сделать:

data[0].extfile

Поскольку оператор console.log (data) возвращает:

{d: "[{"filename":"","size":6,"csize":" 5.85 KB",…AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"}]"} 

Данные, которые вы на самом деле пытаетесь получить, содержатся в строке JSON, содержащейся в свойстве d полученных данных. Если бы вы проанализировали строку и затем получили доступ к свойству extfile, у вас были бы ваши данные:

var actualData= JSON.parse(data.d);

var extfile = actualData[0].extfile;

Answer 2

Не знаю, поможет ли это, но вот оно:

Примечание об устаревании: обратные вызовы jqXHR.success (), jqXHR.error () и jqXHR.complete () удалены с jQuery 3.0. Вместо этого вы можете использовать jqXHR.done (), jqXHR.fail () и jqXHR.always ().

http://api.jquery.com/jquery.ajax/

Также данные являются массивом, возможно, захватите первый объект в массиве data [0] .extfile.

Я думаю, что это может быть переработано так:

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    }).done(function(data){
        if (data != null) {
            $("#ImgItem").attr("src", "data:image/png;base64,'" + 
            data[0].extfile + "'");
        }
    });
}