无法格式化json数据以自动完成

时间:2023-01-14 10:41:14

I wanted to use autocomplete in a text box,I am making an ajax call to get the JSON and I wanted to use it to auto-complete the text box tags,but the array items are turning out to be [object object].and hence the id attribute of the JSON is inaccessible,I wanted to know if there are any ways to get out of this problem

我想在文本框中使用autocomplete,我正在调用ajax来获取JSON,我想使用它来自动完成文本框标记,但是数组项最终是[object]。因此JSON的id属性是不可访问的,我想知道是否有方法可以解决这个问题

var items;
$( document ).ready(function() {
  $("#header").load("Header.html");
  $("#footer").load("Footer.html");

 var url= "GetAuthorities.do";
      $.getJSON( flickerAPI, {
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
      })
        .done(function( data ) {
            items=data;
        });

 $("#tags").autocomplete({
        source:items,
        label:items.id,
        value:items.value
})

});


<td width="30%"><input type="text" name="IrbAppNum" id="IrbAppNum" style="width:40%"> <input id="tags"></td>

After ajax call i am getting this JSON:

在ajax调用之后,我得到这个JSON:

[[
  {"id":"1","value":"Stanford University"},
  {"id":"2","value":"University of Houston"},
  {"id":"3","value":"FDA"},
  {"id":"4","value":"Drug Authority of Texas"}
]]

4 个解决方案

#1


1  

You need to modify your .done() handler a bit as follows:

您需要修改.done()处理程序如下:

var items;
$( document ).ready(function() {
    $("#header").load("Header.html");
    $("#footer").load("Footer.html");

    var url= "GetAuthorities.do";
    $.getJSON( flickerAPI, {
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
    })
    .done(function( data ) {
        if(data && data.length > 0){
            items=data[0]; //grab the data which is at index 0

            //init the autocomplete widget here
            $("#tags").autocomplete({
                source:items,
                label:items.id,
                value:items.value
            });
        }
    });
});

Here we are assigning the returned data to items variable by reading the index 0 of received object and also initiating the autocomplete widget there itself as its a ajax async call. Defining it outside of .done handler will have items variable undefined and you won't get anything in your autocomplete text box's search result.

在这里,我们通过读取接收到的对象的索引0将返回的数据分配给items变量,并将自动完成小部件本身作为ajax异步调用启动。在.done处理程序之外定义它,将会有未定义的项变量,在自动完成文本框的搜索结果中不会得到任何内容。

#2


1  

Change

改变

items=data;

to

items=data[0];

#3


0  

use

使用

items=data[0];

Since its Array of array of objects (2d array). and source requires array of objects only.

因为它的对象数组(2d数组)。源程序只需要对象数组。

#4


0  

 working code:

 var items;
 $( document ).ready(function() {
 $("#header").load("Header.html");
 $("#footer").load("Footer.html");
 var flickerAPI = "GetAuthorities.do";
  $.getJSON( flickerAPI, {
    format: "json"
  })
    .done(function( data ) {
        items=data[0];
        $("#overSightAuth").autocomplete({
            source:items,
            label:items.id,
            value:items.value
    })
    });
});

#1


1  

You need to modify your .done() handler a bit as follows:

您需要修改.done()处理程序如下:

var items;
$( document ).ready(function() {
    $("#header").load("Header.html");
    $("#footer").load("Footer.html");

    var url= "GetAuthorities.do";
    $.getJSON( flickerAPI, {
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
    })
    .done(function( data ) {
        if(data && data.length > 0){
            items=data[0]; //grab the data which is at index 0

            //init the autocomplete widget here
            $("#tags").autocomplete({
                source:items,
                label:items.id,
                value:items.value
            });
        }
    });
});

Here we are assigning the returned data to items variable by reading the index 0 of received object and also initiating the autocomplete widget there itself as its a ajax async call. Defining it outside of .done handler will have items variable undefined and you won't get anything in your autocomplete text box's search result.

在这里,我们通过读取接收到的对象的索引0将返回的数据分配给items变量,并将自动完成小部件本身作为ajax异步调用启动。在.done处理程序之外定义它,将会有未定义的项变量,在自动完成文本框的搜索结果中不会得到任何内容。

#2


1  

Change

改变

items=data;

to

items=data[0];

#3


0  

use

使用

items=data[0];

Since its Array of array of objects (2d array). and source requires array of objects only.

因为它的对象数组(2d数组)。源程序只需要对象数组。

#4


0  

 working code:

 var items;
 $( document ).ready(function() {
 $("#header").load("Header.html");
 $("#footer").load("Footer.html");
 var flickerAPI = "GetAuthorities.do";
  $.getJSON( flickerAPI, {
    format: "json"
  })
    .done(function( data ) {
        items=data[0];
        $("#overSightAuth").autocomplete({
            source:items,
            label:items.id,
            value:items.value
    })
    });
});