不能在'中使用'运营商搜索'长度' in ...需要更改字符串吗?

时间:2018-01-08 23:24:16

标签: javascript jquery html json

我一直在阅读其他一些问题但我无法找到一个完全解释我应该如何修复的问题。我是JSON的新手,并不完全理解这一切。我正在创建一个动态表格,人们可以输入不同身体部位的伤害。我希望能够使用JSON操作这些数据。我正在使用警报来检查我是否可以获得每个人的身体部位/受伤。当我点击usejson按钮时,我收到以下错误:

未捕获的TypeError:无法在'中使用'运营商搜索'长度' in - [然后json代码]

从我的理解来看,似乎它并没有将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>

1 个答案:

答案 0 :(得分:1)

我认为使用可以使用:

// AssignTask gets a specific task type and id for the current logged in user     
rpc AssignTask (google.protobuf.Empty) returns (AssignTaskResponse) {
   option (google.api.http) = {
      get: "/v1/task/assign"
   };
}

但我不明白为什么你把json发送到html然后从html中获取它。