JavaScript Sort Dictionary. Display Cookies.

Posted on December 15, 2015 by

So, the last few weeks I am putting some attention towards JavaScript, as far as it is really an interesting language, making some things fun. Furthermore, thus I am preparing better for the Book Reviews from Apress.com, which have kindly provided me with 3 different JS books about a month ago. My policy there is, that man should understand a little bit more than a beginner, when reviewing books for beginners. 🙂

So, let’s see what I have here today – the task started as really trivial and later it became interesting for me. The idea is to display the cookies in the browser in three different orders – Sorted by Value, by Key or by entry date (a.k.a.) historically. Thus, once the app (or file) is started, you may choose in which order to display, if you have already some cookies to display there:

In the example above, I have 4 cookies, named “Vitosh”, “Academy”,”Vitoshacademy” and “Beroe”. They are displayed historically, as the “historically” checkbox is checked. If you uncheck it, you may choose from the other two options to display the cookies.

Let’s see how the thing work – the whole app is in one file, which has one script. The script starts with window.addEventListener(“load”, init) and thus it adds functions to the button “Save”. The button “Delete Cookies” and the checkboxes, have their functions associated in the HTML code. Thus, whenever some checkbox is pressed, the function showCookies() is called and it shows the cookies based on the selected checkbuttons.

Some interesting enhancements, that you will see – the header “The list is currently ordered historically” is changing with every new way of order of the list. Plus in the code, I am using String.prototype.toProperCase, which I do not use a lot 🙂 The rest a pretty much standard functions for JS.

Thus, let’s summarize – no JS query and you have 3 ways of displaying the sorted dictionary. Pretty much that is all.

Here comes the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>VitoshAcademy.Com</title>
    <script>
        var name1 = " by name";
        var name2 = " by result";
        var str_text = "The list is currently ordered";
        window.addEventListener("load", init);

        function init() {
            document.getElementById("save").addEventListener("click", readInputCookies);
            //document.getElementById("cb_sort").addEventListener("click",readInputCookies);
            //document.getElementById("cb_historical").addEventListener("click",readInputCookies);
            showCookies();
        }

        function getCookies()
        {
            var obj = new Object();
            var obList = document.cookie.split("; ");
            for (var i=0; i < obList.length; i++)
            {
                var obj_s = obList[i].split("=");
                obj[obj_s[0]] = unescape(obj_s[1]);
            }
            return obj;
        }

        function deleteAllCookies() {
            var cookies = document.cookie.split(";");
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i];
                var eqPos = cookie.indexOf("=");
                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
            }
            showCookies();
        }

        String.prototype.toProperCase = function () {
            return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase(           ) + txt.substr(1).toLowerCase();});
        };

        function getSortedKeys(obj) {
            var keys = []; for(var key in obj) keys.push(key);
            return keys.sort(function(a,b){return obj[a]-obj[b]});
        }

        function showCookies() {
            emptyRanking();
            var rankingList = document.getElementById("rankingList");

            if (document.getElementById("cb_sort").checked){
                document.getElementById("cb_label").innerHTML = name1;
                document.getElementById("current_order").innerHTML = str_text + name2;

                var cookies = getCookies();
                var sorted_cookies = getSortedKeys(cookies);

                for (var i = 0; i < sorted_cookies.length; i++) {
                    var li = document.createElement("li");
                    li.appendChild(document.createTextNode(sorted_cookies[i] +" " + cookies[sorted_cookies[i]]));
                    rankingList.appendChild(li);
                }
            } else {
                document.getElementById("cb_label").innerHTML = name2;
                document.getElementById("current_order").innerHTML = str_text + name1;
                var cookies = document.cookie.split(";").sort();

                for (var i = 0; i < cookies.length; i++) {
                    var li = document.createElement("li");
                    li.appendChild(document.createTextNode(cookies[i]));
                    rankingList.appendChild(li);
                }
            }

            if (document.getElementById("cb_historical").checked){
                document.getElementById("cb_sort").disabled = true;
                document.getElementById("current_order").innerHTML = str_text + " historically.";
                emptyRanking();
                var history_cookies = document.cookie.split(";");

                for (var i = 0; i < history_cookies.length; i++) {
                    var li = document.createElement("li");
                    li.appendChild(document.createTextNode(history_cookies[i]));
                    rankingList.appendChild(li);
                }
            }else{
                document.getElementById("cb_sort").disabled = false;
            }

            if (document.cookie.length == 0){
                rankingList.innerHTML = "Nothing to show here, sorry...";
            }
        }

        function emptyRanking() {
            var rankingList = document.getElementById("rankingList");
            while (rankingList.firstChild) {
                rankingList.removeChild(rankingList.firstChild);
            }
        }

        function readInputCookies() {

            var nameField = document.getElementById("name");
            var valueField = document.getElementById("value");
            var name = nameField.value;
            var value = valueField.value;
            name = name.toProperCase();

            setCookie(name, value);
            nameField.value = "";
            valueField.value = "";
            showCookies();
        }

        function setCookie(name, value) {
            if (checkCookieName(name) && checkCookie(value)) {
                document.cookie = name + "=" + value + "; expires=Sat, 29 Feb 2020 12:34:56 UTC";
            }
        }

        function checkCookieName(name) {
            if (name.indexOf(",") > -1 || name.indexOf(";") > -1 || name.indexOf(" ") > -1 || name.indexOf("=") > -1) {
                alert("Unvalid Name");
                return false;
            }
            return true;
        }

        function checkCookie(value) {
            if (value.indexOf(",") > -1 || value.indexOf(";") > -1 || value.indexOf(" ") > -1) {
                alert("Unvalid");
                return false;
            }
            return true;
        }

    </script>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
        div {
            background-color: grey;
            margin: 100px;
            padding: 100px,100px,100px,100px;
        }
        body{
            background-color: black;
        }
        label{
            margin-left: 9px;
        }
    </style>

</head>
<body>
    <div class="container">
        <h1>Some Ranking List Options</h1>
        <hr>
        <h2>Insert New Cookie</h2>
        <h4>Name:</h4><input id="name" name="name"/><h4>Result:</h4><input id="value" name="value"/>
        <button type="button" id="save">Save</button>
        <button onclick="deleteAllCookies()">Delete Cookies</button><br>
        <h2 id="current_order"></h2><hr>
        <input type="checkbox" id="cb_sort" onclick="showCookies()"><label for ="cb_sort" id="cb_label"></label>
        <br>
        <input type="checkbox" id="cb_historical" onclick="showCookies()"><label>historically</label><br>
        <ul class="list-group-item-text" id="rankingList"></ul>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<!DOCTYPE html>

<html>

<head>

<title>VitoshAcademy.Com</title>

var name1 = " by name";

var name2 = " by result";

var str_text = "The list is currently ordered";

window.addEventListener("load", init);

function init() {

document.getElementById("save").addEventListener("click", readInputCookies);

//document.getElementById("cb_sort").addEventListener("click",readInputCookies);

//document.getElementById("cb_historical").addEventListener("click",readInputCookies);

showCookies();

}

function getCookies()

{

var obj = new Object();

var obList = document.cookie.split("; ");

for (var i=0; i < obList.length; i++)

{

var obj_s = obList[i].split("=");

obj[obj_s[0]] = unescape(obj_s[1]);

}

return obj;

}

function deleteAllCookies() {

var cookies = document.cookie.split(";");

for (var i = 0; i < cookies.length; i++) {

var cookie = cookies[i];

var eqPos = cookie.indexOf("=");

var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;

document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";

}

showCookies();

}

String.prototype.toProperCase = function () {

return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase( ) + txt.substr(1).toLowerCase();});

};

function getSortedKeys(obj) {

var keys = []; for(var key in obj) keys.push(key);

return keys.sort(function(a,b){return obj[a]-obj[b]});

}

function showCookies() {

emptyRanking();

var rankingList = document.getElementById("rankingList");

if (document.getElementById("cb_sort").checked){

document.getElementById("cb_label").innerHTML = name1;

document.getElementById("current_order").innerHTML = str_text + name2;

var cookies = getCookies();

var sorted_cookies = getSortedKeys(cookies);

for (var i = 0; i < sorted_cookies.length; i++) {

var li = document.createElement("li");

li.appendChild(document.createTextNode(sorted_cookies[i] +" " + cookies[sorted_cookies[i]]));

rankingList.appendChild(li);

}

} else {

document.getElementById("cb_label").innerHTML = name2;

document.getElementById("current_order").innerHTML = str_text + name1;

var cookies = document.cookie.split(";").sort();

for (var i = 0; i < cookies.length; i++) {

var li = document.createElement("li");

li.appendChild(document.createTextNode(cookies[i]));

rankingList.appendChild(li);

}

if (document.getElementById("cb_historical").checked){

document.getElementById("cb_sort").disabled = true;

document.getElementById("current_order").innerHTML = str_text + " historically.";

emptyRanking();

var history_cookies = document.cookie.split(";");

for (var i = 0; i < history_cookies.length; i++) {

var li = document.createElement("li");

li.appendChild(document.createTextNode(history_cookies[i]));

rankingList.appendChild(li);

}

}else{

document.getElementById("cb_sort").disabled = false;

}

if (document.cookie.length == 0){

rankingList.innerHTML = "Nothing to show here, sorry...";

}

function emptyRanking() {

var rankingList = document.getElementById("rankingList");

while (rankingList.firstChild) {

rankingList.removeChild(rankingList.firstChild);

}

function readInputCookies() {

var nameField = document.getElementById("name");

var valueField = document.getElementById("value");

var name = nameField.value;

var value = valueField.value;

name = name.toProperCase();

setCookie(name, value);

nameField.value = "";

valueField.value = "";

showCookies();

}

function setCookie(name, value) {

if (checkCookieName(name) && checkCookie(value)) {

document.cookie = name + "=" + value + "; expires=Sat, 29 Feb 2020 12:34:56 UTC";

}

function checkCookieName(name) {

if (name.indexOf(",") > -1 || name.indexOf(";") > -1 || name.indexOf(" ") > -1 || name.indexOf("=") > -1) {

alert("Unvalid Name");

return false;

}

return true;

}

function checkCookie(value) {

if (value.indexOf(",") > -1 || value.indexOf(";") > -1 || value.indexOf(" ") > -1) {

alert("Unvalid");

return false;

}

return true;

}

</script>

div {

background-color: grey;

margin: 100px;

padding: 100px,100px,100px,100px;

}

body{

background-color: black;

}

label{

margin-left: 9px;

}

</style>

</head>

<body>

<h1>Some Ranking List Options</h1>

<hr>

<h2>Insert New Cookie</h2>

<h4>Name:</h4><input id="name" name="name"/><h4>Result:</h4><input id="value" name="value"/>

<button onclick="deleteAllCookies()">Delete Cookies</button><br>

<br>

<input type="checkbox" id="cb_historical" onclick="showCookies()"><label>historically</label><br>

</div>

</body>

</html>

Available in GitHub as well! Enjoy it! 🙂

Tagged with: JavaScript cookies, javascript dictionary, javascript sort dictionary