Ошибка TypeError не определена при попытке получить объект cookie через arrayList

Question

Ошибка TypeError не определена при попытке получить объект cookie через arrayList

1

Я делаю страницу, которая сортирует значения в массиве по имени, а затем, когда я нажимаю кнопку "пишу в cookie", она должна ее хранить, затем я нажимаю сортировку по возрасту и затем нажимаю кнопку "читать из файла cookie", новый вывод должен быть списком, который я сохранил, когда я нажал кнопку "пишите в cookie" ранее.

Я продолжаю получать ошибку, когда я нажимаю "читать из cookie":

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                font-family: tahoma, sans-serif;
                padding: 1em;
            }
            div {
                padding: 1em;
            }

            h3 {
                margin-bottom: -0.5em;
            }

        </style>
    </head>
    <body>
        <input type="button" onclick ="sortByAge()" value="Age Sort"/>
        <input type="button" onclick ="sortByName()" value="Name Sort"/>
        <input type="button" onclick="writePerson()" value="Write List to Cookie" />
        <input type="button" onclick="readPerson()" value="Read List from Cookie" />

        <h3>Person List</h3>
        <div id="contacts"></div>

        <script src="sort.js"></script>
        <script src="CookiesWithObjects.js"></script>
        <script>

            // If you do not use this and you misspell a variable name, one is auto-declared. 
            "use strict";

            //debugger;

            function refreshPersonList() {
                var output = "";
                for (var i = 0; i < personList.length; i++) {
                    output += personList[i].getName() + " " + personList[i].getAge() + "<br/>";
                }
                document.getElementById("contacts").innerHTML = output + "<br/>";
            }

            function sortByName() {
                console.log("to sort by name");
                sortByKey(personList, "getName()");
                refreshPersonList();
            }

            function sortByAge() {
                console.log("to sort by age");
                sortByKey(personList, "getAge()");
                refreshPersonList();
            }

            function writePerson() {
                Cookie.setCookieObj("myPerson", personList, 365);
            }

            function readPerson() {
                personList = Cookie.getCookieObj("myPerson");
                refreshPersonList();
            }

            function MakePerson(newName, newAge) {
            var person = {};
            person.name = newName;
            person.age = newAge;
            return person;
        }


        // main program 
        var personList = []; // empty array
        personList[0] = new MakePerson("sally", 20);
        personList[1] = new MakePerson("abe", 40);
        personList[2] = new MakePerson("dave", 35);
        personList[3] = new MakePerson("frank", 55);
        personList[4] = new MakePerson("ellie", 15);
        personList[5] = new MakePerson("debbie", 60);

            refreshPersonList();

        </script>

    </body>
</html>

CookieWithObjects.js:

var Cookie = {};

Cookie.setCookie = function (cname, cvalue, exdays) {
    if (!exdays) {
        exdays = 365;
    }
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    console.log("cookie stored");
};

Cookie.setCookieObj = function (cname, cObj, exdays) {
    var jsonString = JSON.stringify(cObj);
    Cookie.setCookie(cname, jsonString, exdays);
};

Cookie.getCookie = function (cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    console.log("cookie read");
    return "";
};

Cookie.getCookieObj = function (cname) {
    var jsonString = Cookie.getCookie(cname);
    if (!jsonString) {
        return null;
    }
    jsonString = "(" + jsonString + ")";
    var obj = eval(jsonString);
    return obj;
};

sort.js:

// array is the array you want to sort
// key is the name of the property by which you want to sort (in quotes)

function sortByKey (array, getter) {

    /* .sort is a built-in array method provided by javaScript.
     * 
     * .sort expects you to provide a function (such as the unnamed function below)
     * that takes two elements of the array (a and b in the code below) and returns either 
     *    1 (if the first element is larger than the second) or 
     *   -1 if the second element is larger that the first, or 
     *    0 if both elements are equal.   */

return array.sort(function (a, b) {  
    // a and b are two elements of the array to be compared

    /* These two lines of code extract the key property from the objects 
     * to be compared. 
     * 
     * These two lines of code use JavaScript eval keyword that allows you 
     * to run (as code) whatever is stored inside of a string variable.     
     * Example: if the user invoked sortByKey(myList, "getName()")   then
     * the following line of code would execute a.getName() where a is an 
     * element of myList such as myList[3] */
    var akey = eval("a."+getter);
    var bkey = eval("b."+getter);

    // If the values to be compared are character, convert to lower case
    // so that it sorts characters as you would expect: "a" not larger than "A".
    if (typeof akey === "string") {
        akey = akey.toLowerCase();
    }
    if (typeof bkey === "string") {
        bkey = bkey.toLowerCase();
    }

    // If the values to be compared are numeric, make sure to compare them numerically
    // not treating the digits like characters.
    if (!isNaN(akey)) {
        akey = Number(akey);
    }
    if (!isNaN(bkey)) {
        bkey = Number(bkey);
    }

    // The meat of the function is to return -1 if the first element is < the second
    // or 1 if first element is > second element (or 0 if they are equal) - based on the 
    // key field by which you are comparing 
    var returnVal=0;
    if (akey < bkey) {
        returnVal = -1;
    } else if (akey > bkey) {
        returnVal = 1;
    } 

    // This is the badly documented code I replaced...
    //var returnVal = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    console.log("comparing " + akey + " to " + bkey + " yields " + returnVal);
    return returnVal;
}); 
}

pyuntae 13 фев. 2018, в 01:49

Источник

0

Можете ли вы включить библиотеку sort.js
Harun Diluka Heshan 15 фев. 2018, в 10:58
0

Я добавил это ^ @HarunDilukaHeshan
pyuntae 15 фев. 2018, в 19:07
0

Я также обновил то, что у меня есть в index.html
pyuntae 15 фев. 2018, в 19:13
0

Я добавил в свой ответ ссылку, которую недавно добавил. Я содержит ссылку на jsfiddle, где я проверил ваш код.
Harun Diluka Heshan 15 фев. 2018, в 19:40

Показать ещё 2 комментария

Теги:

javascript

2 ответа

1

Вместо eval() попробуйте использовать JSON.parse() потому что eval() не возвращает объект. Он просто оценивает это.

Cookie.getCookieObj = function (cname) {
    var jsonString = Cookie.getCookie(cname);
    if (!jsonString) {
        return null;
    }
    var obj = JSON.parse(jsonString);
    return obj;
};

И самое главное изменить свойства constructA getAge(), getName() для свойств.

        function MakePerson(newName, newAge) {
            var person = {};
            person.getAge = newAge;
            person.getName = newName;
            return person;
        }

Я тестировал весь код на jsFiddle.

Решение

Harun Diluka Heshan 12 фев. 2018, в 22:45

0

ничего не делает ...
pyuntae 13 фев. 2018, в 01:17
0

personList [i] просто показывает неопределенное, когда я читаю куки
pyuntae 13 фев. 2018, в 20:44

Ещё вопросы

Можете ли вы включить библиотеку sort.js
Я также обновил то, что у меня есть в index.html
Я добавил в свой ответ ссылку, которую недавно добавил. Я содержит ссылку на jsfiddle, где я проверил ваш код.
personList [i] просто показывает неопределенное, когда я читаю куки

Medet Tleukabiluly · Accepted Answer · 2018-02-13T00-01-00.000Z

У вас есть 2 проблемы

Проблема 1

Ваш MakePerson - это класс, и экземпляр не имеет свойств
Поэтому при хранении Cookie.setCookieObj("myPerson", personList, 365)
Он фактически хранит

myPerson [{},{},{},{},{},{}]

Необходимо сохранить свойства

function MakePerson(newName, newAge) {
    var person = {};
    person.name = newName;
    person.age = newAge;
    return person;
}

Проблема 2

Вы возвращаете null в Cookie.getCookieObj
Но вы не проверяете значение в функции refreshPersonList

function refreshPersonList() {
    var output = "";
    if (personList && personList.length) { // <== added check
        for (var i = 0; i < personList.length; i++) {
            // change getName()/getAge() to name/age
            output += personList[i].name + " " + personList[i].age + "<br/>";
        }
        document.getElementById("contacts").innerHTML = output + "<br/>";
    }
}

Проблема 3

Также Харун Дилука Хэшань сделал хороший момент, вы должны JSON.parse, а не eval

когда я делаю то, что вы говорите, список просто отображается как неопределенный вместо значений, которые я помещаю в список массивов.
Читайте код более внимательно, я изменил класс MakePerson, который меняет personList, поэтому перепроверяю все использования personList
Я сделал это и использовал отладчик и консоль, и мой personList, включая все переменные, не определен.