Невозможно сохранить извлеченные данные в Jquery - PullRequest
Новая
       6

Невозможно сохранить извлеченные данные в Jquery

1 голос
/ 02 апреля 2020

Я работаю над своим клиентом и достиг контрольно-пропускного пункта. Я пытаюсь получить данные из моего бэк-энда, и это фактически выборка данных. Но только после всего остального? Я покажу вам. 

$(function(){
    function GetURLId() {
        var url = window.location.href;
        var path = url.substring(url.lastIndexOf('/') + 1);
        var id = path.substring(path.lastIndexOf('?id=') + 4, path.lastIndexOf("?id") + 5)
        return id;
    }


    var url = 'https://localhost:5001/api/rental/byId/' + GetURLId();

        fetch(url)
        .then((resp) => resp.json()) 
        .then(function(data) {
            Object.keys(data).forEach(key => {
                console.log(`${key}: ${data[key]}`);
            })
        });
});

Итак, сначала я получаю идентификатор, с которым работаю, из URL. Тогда, где проблема заключается в коде под ним. Я могу получить свои данные, как это console.logs это: 

id: 2
status: "Open"
damage: true

Таким образом, данные действительно выбираются из моего бэк-энда. Но теперь, каждый раз, когда я пытаюсь сохранить данные, они остаются неопределенными. Я пробовал: 

$(function(){
    var rental = []; // Added an array
    var url = 'https://localhost:5001/api/rental/byId/' + GetURLId();

        fetch(url)
        .then((resp) => resp.json()) 
        .then(function(data) {
            Object.keys(data).forEach(key => {
                console.log(`${key}: ${data[key]}`);
                rental.push(rental[key] = data[key]);
            })
        });
    console.log(rental['id']); // Returns undefined
});

И: 

var rental = []; // Added an array outside of the function
$(function(){
    var url = 'https://localhost:5001/api/rental/byId/' + GetURLId();

        fetch(url)
        .then((resp) => resp.json()) 
        .then(function(data) {
            Object.keys(data).forEach(key => {
                console.log(`${key}: ${data[key]}`);
                rental.push(rental[key] = data[key]);
            })
        });
    console.log(rental['id']); // Returns undefined
});

Но! С последним, где аренда находится вне функции, я могу фактически вызвать это в консоли. И в консоли он действительно возвращает значение. 

Inside Console:
> rental["id"]
< 2

Наконец, я попытался проверить значение ключа и значение внутри выборки, например: 

$(function(){
    var url = 'https://localhost:5001/api/rental/byId/' + GetURLId();

        fetch(url)
        .then((resp) => resp.json()) 
        .then(function(data) {
            Object.keys(data).forEach(key => {
                if(key == "status" && data[key] != "Reserved") {
                    console.log(`${key}: ${data[key]}`); // Returns damage: undefined 3 times
                }
            })
        });
});

Но это также не работает. Он возвращает урон: не определено 3 раза в консоли.

Так что, если кто-нибудь знает, что здесь происходит, это было бы здорово!

Большое спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Ответ: 2 ошибки в моем коде. - Во-первых, я не учел асинхронную природу кода. - Во-вторых, при попытке исправить это с помощью другого, затем заблокировать и выполнить мой код там. Я не возвращал значение в последующем блоке, но вместо этого forEach. 

fetch(url)
        .then(resp => resp.json()) 
        .then(data => {
            var rentalStatus;
            Object.keys(data).forEach(key => {
                rental[key] = data[key];
                if(key == "status") {
                    rentalStatus = data[key];
                }
            })
            return rentalStatus;
        })
        .then(rentalStatus => {
            console.log(rental["id"]); // This does return the id now!
            if(rentalStatus == "Reserved") {
                $("#assign-items").removeClass("d-none");
            }
        }).catch(error => {
            console.log("Error:" + error);
        });
0 голосов
/ 02 апреля 2020

Запросы на выборку асинхронные . Это означает, что когда вы вызываете fetch, для его завершения может потребоваться некоторое время, поэтому JavaScript позволяет остальной части кода продолжить работу без блокировки. Поэтому запись чего-либо на консоль до вашего запроса, очевидно, приведет к пустому массиву.

Кроме того, массивы имеют индекс, а не имя, основанное на JavaScript. Однако, поскольку массивы по сути являются объектами, они все еще работают, но вы должны никогда делать следующее ниже. 

var rental = [];
rental['id'] = 'foo';
console.log(rental['id']);

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

var rental = {};
rental['id'] = 'foo';
console.log(rental['id']);

В последнем примере вы, кажется, делаете все просто отлично. Вы уверены, что выбранная вами data не имеет значения undefined в своей структуре? Это поможет увидеть, как выглядят данные.

...