显示rest api json响应，如使用angular js的文本框自动填充

Posted 2023-05-08

【中文标题】显示rest api json响应，如使用angular js的文本框自动填充

【英文标题】：show rest api json response like textbox autopopulate using angular js

【发布时间】：2018-08-04 05:01:13

【问题描述】：

我正在访问地址查找休息 API 服务 - JSON 响应。我想显示我的 JSON 响应，例如自动下拉列表。休息服务结果有 5 个 JSON 数组列表用于我的所有搜索，但在我下面的代码中，JSON 结果再次根据文本框中输入的值进行过滤。

http://jsfiddle.net/3etbtfwL/230/

测试用例# 1) 在文本框休息服务中输入“谷歌”返回 5 JSON 数组列表在文本框中显示自动填充结果，如下所示 - 通过

2) 在文本框中输入“谷歌驱动器”-rest 服务实际上正确返回 5 个 JSON 数组列表，但文本框自动填充列表中没有显示任何值-失败 （原因 - 我输入的值与 JSON 返回列表值不匹配）

如何显示从 JSON 结果返回的所有值，如文本框自动填充。

角度代码

var app = angular.module('httpApp', []);

app.controller('httpAppCtrlr', function ($scope, $http) 

     $scope.AddressLookup = function (address)                  
     $http.get('http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=' + address + '&f=json')
        .then(function (results) 
           $scope.items = results.data.suggestions;        
    );
    
);

HTML 代码

<div data-ng-app='httpApp' data-ng-controller='httpAppCtrlr'>
    <input type="text" data-ng-model="item.text" list="comicstitle" 
               placeholder="Address Lookup"
               ng-change="AddressLookup(item.text)"
               >
        <datalist id="comicstitle">
            <option ng-repeat="item in items" value="item.text" >item.text</option>
        </datalist>
</div>

【参考方案1】：

您是否收到有关您输入 google drive 的文本的响应，如果是，请在控制器中使用 $timeout

var app = angular.module('httpApp', []);



 app.controller('httpAppCtrlr', function ($scope, $http, $timeout) 
    $scope.AddressLookup = function (address)                  
 $http.get('http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=' + address + '&f=json')
    .then(function (results) 
       $timeout(function() 
         $scope.items = results.data.suggestions;
       )        
    );
  
 );

【讨论】：

是的，我的搜索得到了响应，但 JSON 结果没有显示在我的文本框自动填充列表中。检查此链接以供参考 - geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/…

你能告诉我你在这段代码中使用的指令吗

我没有使用指令。请检查附加的 jsfiddle 以获取更多源代码详细信息。

我看到了你的小提琴，但我无法理解你的 html 中的