如何从这里摆脱Js Undefined？

Question

my code is okay and output comes into console. 我的代码正常，输出进入控制台。 but in my span tag result(firstname) shows undefined. 但是在我的span标签中，result（firstname）显示为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. 并将数据保存在本地存储中。

Answer 1

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); 您的代码无效，将多个具有相同ID的元素附加到var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; msg.append(show); 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 ; 但是msg是具有result id的元素;

Note it is also invalid to have a span contain a block element such as a div. 请注意，跨度包含块元素（例如div）也是无效的。
Why include jQuery multiple times? 为什么要多次包含jQuery？
Implied global variables, 隐式全局变量
</br> is invalid, </br>无效，
fsname is global (undefined) fsname是全局的（未定义）
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? 在$('#input_id').keyup(function(e) { ，每次按下ajax都不会踩油门？如果我按下“ a”键并按住不放怎么办？我会收到多个“ aaaaa”，也许使用“更改”事件？
localStorage.clear(); localStorage.clear（）; in the document ready event handler indicates you MAY wish to use sessionStorage instead. 文档就绪事件处理程序中的表示您可能希望使用sessionStorage。
localStorage.setItem(data, JSON.stringify(tree)); is puzzling normally it would look like localStorage.setItem("mytree", JSON.stringify(tree)); 通常令人困惑，看起来像localStorage.setItem("mytree", JSON.stringify(tree)); or similar then use localStorage.getItem("mytree"); 或类似的，然后使用localStorage.getItem("mytree"); to access it 访问它
fsname = $('#input_id').val(); you are already in the event handler for that so use fsname = $(this).val(); 您已经在该事件处理程序中，因此请使用fsname = $(this).val();
$(document).ready(function () { better written as $(function () { as the recommended method https://api.jquery.com/ready/ $(document).ready(function () {最好写为$(function () {作为推荐方法https://api.jquery.com/ready/
rewrite your var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; 重写您的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>'; 像var show = '<span class="result">' + getdata[j].firstname + " " + (!!getdata[j].surname && !!getdata[j].surname)? getdata[j].surname :"" + '</span>'; var show = '<span class="result">' + getdata[j].firstname + " " + (!!getdata[j].surname && !!getdata[j].surname)? getdata[j].surname :"" + '</span>';

ie 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. 如果要使用跨度（结果）作为DIV，则使跨度（结果）为DIV。

如何从这里摆脱Js Undefined？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-14 04:47:54

如何从这里摆脱Js Undefined？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-14 04:47:54

解决方案1
1 已采纳 2018-02-14 04:47:54