how to get rid of Js Undefined from here?

debugcn Published at Dev

rai

my code is okay and output comes into console. but in my span tag result(firstname) shows undefined. i can't understand what is the problem. can anyone help me to solve this problem? how can i get rid of this problem?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Baby name</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

</head>
<body>
<div class="first_div" id="div_id">
    <div><p> Baby Names</p></div>
    <div><p> HOW UNIQUE IS YOUR CHILD NAMES IS ?</p></div>
    Enter Full Name : <input type="text" id="input_id" class="input_class">
    <input type="button" class="btn_class" id="btn_id" value="search">
    </br>
    <span id="result">  </span>

</div>
</body>
</html>


<script>
    function insertWord(tree, string) {
        var keys = Object.keys(tree),
            result = keys.some(function (k) {
                    var i = 0;
                    if (string.substr(0, k.length) === k) {
                        string.slice(k.length);
                        return true;
                    }
                    while (k[i] == string[i] && i < k.length) {
                        i++;
                    }
                    if (i) {
                        var id = k.slice(0, i);
                        tree[id] = {
                            [k.slice(i)]: tree[k], [string.slice(i)]: 0
                        }
                        ;
                        delete tree[k];
                        return true;
                    }

                }
            );

        if (!result) {
            tree[string] = 0;
        }
    }

    $(document).ready(function () {
        localStorage.clear();
        $('#input_id').keyup(function (e) {
            fsname = $('#input_id').val();
            var data = fsname.trim();
            var msg = $('#result');
            msg.empty();
            var localdata = localStorage.getItem(data);
            if (data) {
                if (localdata == null) {
                    $.ajax({
                        url: "search.php",
                        method: "post",
                        data: {
                            input: data
                        },
                        dataType: "",
                        success: function (name) {
                            var getdata = JSON.parse(name);
                            var tree = {};
                            getdata.forEach(insertWord.bind(null, tree));
                            localStorage.setItem(data, JSON.stringify(tree));
                            console.log(JSON.parse(localStorage.getItem(data)));
                            console.log(getdata);
                            var s = getdata.length;
                            for (var j = 0; j < s; j++) {
                                if (getdata[j].surname) {
                                    var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
                                    msg.append(show);

                                } else {
                                    var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
                                    msg.append(show1);

                                }
                            }
                        }
                    });
                } else {
                    var getdata = JSON.parse(localdata);
                    var s = getdata.length;
                    for (var j = 0; j < s; j++) {
                        if (getdata[j].surname) {
                            var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
                            msg.append(show);

                        } else {
                            var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
                            msg.append(show1);

                        }
                    }
                }
            }
        })

    });
</script>

i want my firstname here. but it shows undefined. how can i solve this problem? In console my output is pretty okay. and data saved in localstorage.

Mark Schultheiss

Your code is invalid, appending multiple elements with the same id var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; msg.append(show);

Yet msg is the element with the id of result;

Note it is also invalid to have a span contain a block element such as a div.
Why include jQuery multiple times?
Implied global variables,
</br> is invalid,
fsname is global (undefined)
missing semi-colons,
Are you SURE you want keyup? in $('#input_id').keyup(function(e) { doing ajax on each keyup without throttle? What if I press the "a" key and hold it down? I get multiple "aaaaa" Perhaps use a 'change' event?
localStorage.clear(); in the document ready event handler indicates you MAY wish to use sessionStorage instead.
localStorage.setItem(data, JSON.stringify(tree)); is puzzling normally it would look like localStorage.setItem("mytree", JSON.stringify(tree)); or similar then use localStorage.getItem("mytree"); to access it
fsname = $('#input_id').val(); you are already in the event handler for that so use fsname = $(this).val();
$(document).ready(function () { better written as $(function () { as the recommended method https://api.jquery.com/ready/
rewrite your var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; something like var show = '<span class="result">' + getdata[j].firstname + " " + (!!getdata[j].surname && !!getdata[j].surname)? getdata[j].surname :"" + '</span>';

i.e. take this group of lines

if (getdata[j].surname) {
     var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
     msg.append(show);
 } else {
     var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
     msg.append(show1);
 }

rewrite as these two lines

 var showName = getdata[j].firstname + " " + (!!getdata[j] && !!getdata[j].surname)? getdata[j].surname :"";
 msg.append('<span class="result">'  + showName + '</span>');

While you are at it, make your code more DRY.

Put that last in a function and call it instead of putting it in twice conditionally.

Make the span (result) a DIV if you want to use blocks (div) inside it instead.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-9

Comments

0 comments

From Dev

What does ArrayIndexOutOfBoundsException mean and how do I get rid of it? Here is a code sample that triggers the exception:

From Dev

Related Related

Article