Javascript 无法使用“in”运算符在中搜索“length”。。。需要更改字符串吗？_Javascript_Jquery_Html_Json

Javascript 无法使用“in”运算符在中搜索“length”。。。需要更改字符串吗？

javascript jquery html json

Javascript 无法使用“in”运算符在中搜索“length”。。。需要更改字符串吗？,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我已经阅读了这里的一些其他问题，但我找不到一个能完全解释我应该如何解决它的问题。我是JSON新手，并不完全理解它。我正在创建一个动态表，人们可以在其中输入不同身体部位的损伤。我希望能够使用JSON操作这些数据。我正在使用警报检查我是否可以获得每个单独的身体部位/伤害。单击usejson按钮时，出现以下错误：未捕获的TypeError:无法使用'in'运算符在-[然后是json代码]中搜索'length' 据我所知，它似乎没有将JSON识别为对象，而是识别为字符串。作为新手，我并不完全理解这一点

我已经阅读了这里的一些其他问题，但我找不到一个能完全解释我应该如何解决它的问题。我是JSON新手，并不完全理解它。我正在创建一个动态表，人们可以在其中输入不同身体部位的损伤。我希望能够使用JSON操作这些数据。我正在使用警报检查我是否可以获得每个单独的身体部位/伤害。单击usejson按钮时，出现以下错误：

未捕获的TypeError:无法使用'in'运算符在-[然后是json代码]中搜索'length'

据我所知，它似乎没有将JSON识别为对象，而是识别为字符串。作为新手，我并不完全理解这一点。有人能修复我的代码，让它提醒每个身体部位吗

提前谢谢你的帮助

<!DOCTYPE html>
<head>
<!--all 4 below need for bootstrap 4 - including poppers-->
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<html>
   <body>
        <style>
            table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td,
    th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
   </style>



    <table id="injuriestable">
    <tbody>
        <tr id="heading">
            <th id="bodypart">Body Part</th>
            <th id="injuries">Injuries</th>
            <th id="edit">Edit</th>
        </tr>
    </tbody>
</table>
Test input: <input id="injuryinput" type="text"><br>
<button data-bodypart="head" class="addinj">Head</button>&nbsp&nbsp<button data-bodypart="shoulder" class="addinj">shoulder</button>&nbsp&nbsp<button data-bodypart="knee" class="addinj">knee</button>&nbsp&nbsp<button data-bodypart="foot" class="addinj">foot</button><br/>
<button id="arraytest" >Get Json Array</button>
<button id="usejson" >Use Json</button>


<div id="jsonarray"></div>

<script>
    //adding a new row
    $(document).ready(function() {

        //adding a new row   
        $(".addinj").click(function() {
            var bodpart = $(this).data("bodypart");
            var datas = $("#injuryinput").val();
            //checks if row exists and if does updates/if not creates one
            if ($("#part" + bodpart).length > 0) {
                $("#injuries" + bodpart).html(datas);
            } else {
                $('#injuriestable').append('<tr id="part' + bodpart + '"><td>' + bodpart + '</td><td id="injuries' + bodpart + '">' + datas + '</td><td><button data-bodparts="' + bodpart + '" class="injurybutton">' + bodpart + '</td></tr>')
            }
        });

       //get json
        $('body').on('click', '#arraytest', function() {
            var table = document.getElementById("injuriestable");
            var tableArr = [];
            for (var i = 1; i < table.rows.length; i++) {
                tableArr.push({
                    bodypart: table.rows[i].cells[0].innerHTML,
                    injuries: table.rows[i].cells[1].innerHTML,
                });
            }
            var jsonstring = (JSON.stringify(tableArr));
            $("#jsonarray").html(jsonstring);
        });

        $('body').on('click', '#usejson', function() {
            var data = $("#jsonarray").html();

            $.each(data, function(i, item) {
                alert(data[i].bodypart);
            });
        });
    });
</script>

</body>

</html>

我认为使用可以使用：

$('body').on('click', '#usejson', function() {
        //var data = $("#jsonarray").html();
        var data = JSON.parse($("#jsonarray").html());

        $.each(data, function(i, item) {
            alert(data[i].bodypart);
        });
    });

但我不明白为什么要将json发送到html，然后从html获取它。

json是一种格式。这是一种以文本形式编写数组或对象的方法。您可以使用它通过纯文本通信信道传输复杂数据。文本形式基于在JavaScript中编写数组文字或对象文字的方式，因此命名为：JavaScript对象表示法。你根本不需要它来完成你想要完成的事情。另外：永远不要将数据存储在HTML元素中供以后使用。将所有内容都保存在vars中，并使用HTML来显示：代码实际上使用JSON.stringify来比较ObjectsAah，感谢您的帮助。此时，如果受伤情况不同，JSFIDLE将创建一个新行。如何更改此代码，使其仅在bodypart不同时创建新行？另外，如何将数据属性添加到正在创建的按钮？1。someinjury=>injury.bodypart==injToAdd.bodypart 2。查找jQuery方法并使用它。非常感谢。这很有效。是的，我应该改用变量。在未来会这样做吗