Uncaught TypeError：无法使用'in'运算符在JSON字符串中搜索''

Question

我在网站上使用了令牌输入，这是初始化令牌输入的方法：

$(document).ready(function () {           
    var populateValue = document.getElementById('<%= hiddentokenPrePopulate.ClientID%>').value
    $("#<%= tokenEmployee.ClientID%>").tokenInput("../Employee/getEmployeeDetails.ashx", {
        deleteText: "X",
        theme: "facebook",
        preventDuplicates: true,
        tokenDelimiter: ";",
        minChars: 3,
        tokenLimit: 1,
        prePopulate: populateValue
    });
});

脚本停留在这一行：

 prePopulate: populateValue

当我删除此行时，不会出现任何JavaScript错误，但是我需要此，因为我需要预先填充令牌输入。 populateValue是：

[{
    "id": "11566",
    "name": "Smith - White"
}]

出现JavaScript错误：

未被捕获的TypeError：无法使用'in'运算符在[{“ id”：“ 11566”，“ name”：“ Smith-White”}]中搜索'47'

如何解决此错误？

Answer 1

您需要将populateValue变量中的字符串解析为一个对象：

prePopulate: $.parseJSON(populateValue)

或者，在普通的JS中：

prePopulate: JSON.parse(populateValue)

Answer 2

如果您使用字符串作为数组，则可能会收到此错误。 假设如果您从ajax获得json，却忘记了解析结果并将结果用作数组。 补救措施如上所述，在使用json之前先对其进行解析。

Answer 3

您的服务器端代码表示您在其中编写WebMethod的.ToList()页面，应始终返回.ToList()表示json数组

这是我的.CS页面代码：

Web方法

public static string PopulateDetails(Guid id){
    var prx = new ProductProxy();
    var result = prx.GetFirstorDefault(id); // this method is having List<ClassObject> return type
    return JsonConvert.SerializeObject(result);
}

然后在我的jQuery post方法中：

$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    url: "Productjq.aspx/PopulateDetails",
    data: JSON.stringify({id: id}), // This is Id of selected record, to fetch data
    success: function(result) {
        var rspns = eval(result.d); // eval is used to get only text from json, because raw json looks like "Id"\"1234"

        $.each(rspns, function() {
            $('#<%=txtProductName.ClientID %>').val(this.Name);
        });
    },
    error: function(xhr, textStatus, error) {
        alert('Error' + error);
    }
});

Answer 4

我也收到此错误。

C＃Api返回序列化字典数据。

return JsonConvert.SerializeObject(dic_data);
return new JavaScriptSerializer().Serialize(dic_data);

继续获取此错误消息，直到我不尝试序列化就直接返回了Dictionary数据

return dic_data;

浏览器端没有更多错误。 不知道为什么。

Answer 5

错误：[Vue警告]：渲染错误：“ TypeError：无法使用'in'运算符在undefined中搜索'form'”在--->中位于resources / js / components / Users.vue中

我的代码中出现此错误。 我正在使用laravel 5.7和vuejs2开发一个管理面板项目。 这是我的代码：

<template>
    <div class="container">
      <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Users List</h3>

                <div class="card-tools">
                    <button class="btn btn-success " data-toggle="modal" data-target="#addNew">Add User
                        <i class="fas fa fa-user-plus fa-fw"></i>
                    </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Type</th>
                      <th>Modify</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>183</td>
                      <td>John Doe</td>
                      <td>11-7-2014</td>
                      <td><span class="tag tag-success">Approved</span></td>
                      <td>
                          <a href="#">
                              <i class="fa fa-edit"></i>
                          </a>
                          | |
                          <a href="#">
                              <i class="fa fa-trash red"></i>
                          </a>
                      </td>
                    </tr>


                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>


        <!-- Modal -->
            <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewLabel">Add New</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                       <div class="form-group">
                            <input v-model="form.name" type="text" name="name"
                                 placeholder="Name"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                            <has-error :form="form" field="name"></has-error>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Create</button>
                    </div>
                    </div>
                </div>
            </div>
    </div>

</template>

<script>
    export default {

        data(){
            return
            {
                form: new Form({
                    name: '',
                    email: '',           
                    email_verified_at: '',
                    password: ''
                })
            }
        },

        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

有什么解决方案吗，谢谢高级。