在Object中搜索String

时间:2017-03-21 18:41:51

标签: javascript angularjs object

我试图在角度Js中进行自动建议,如果我必须在数组中找到一个字符串,我可以使用indexOf方法,基于索引值,我可以得到建议。 但是我应该如何匹配Object数组中的字符串?

我有一个对象数组

  $scope.array=[
            {"name":"stackoverflow","id":1},
            {"name":"sunny","id":2},
            {"name":"san","id":3},
            {"name":"bat","id":4},
            {"name":"ball","id":5}
          ]

所以在文本框中输入" st",它应该给我一个数组的结果[{stackoverflow"," id":1}]

如果我输入" ba"它应该给我一个数组的结果[{" name":" bat"," id&#34 :4},         {"名称":"球"" ID":5}]

控制器内部

$scope.searchString=function(){
//what logic should I write here?
}

4 个答案:

答案 0 :(得分:2)

您可以{/ 1}}使用

filter

<input type="text" ng-model="searchText" />
 <div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>
angular.module("app",[])
.controller("ctrl",function($scope){

$scope.array=[
            {"name":"stackoverflow","id":1},
            {"name":"sunny","id":2},
            {"name":"san","id":3},
            {"name":"bat","id":4},
            {"name":"ball","id":5}
          ]
})

使用自定义功能

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="searchText" />
 <div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>
</div>
angular.module("app",[])
    .controller("ctrl",function($scope){

    var backUp=[
                {"name":"stackoverflow","id":1},
                {"name":"sunny","id":2},
                {"name":"san","id":3},
                {"name":"bat","id":4},
                {"name":"ball","id":5}
              ]
    $scope.array = angular.copy(backUp)
    $scope.changeText = function(){ 
      $scope.array = backUp.filter(function(o){      
       return o.name.startsWith($scope.searchText)
      })
    }
    })

答案 1 :(得分:2)

要直接回答您的问题,这应该有效:

$scope.searchString=function(str){
  const results = [];
  const len = str.length;
  for(const item of $scope.array){
    const test = item.name.substr(0, len);
    if(str === test){
      results.push(item);
    }
  }
  return results;
}

尽管如此,关于来自@sachila的过滤器的方法可能对你的情况有意义。

答案 2 :(得分:2)

我可能会对数组使用.reduce(),然后检查每个对象项是否匹配。类似的东西:

var desiredResults = $scope.array.reduce(function(p,c){
    for(key in c){
        if(c[key].indexOf("valueToMatch") > -1){
            p.push(c);
            next();
        }
    }
    return p;
},[])

我没有测试过这段代码,但这是一般的想法。

答案 3 :(得分:2)

以下是您的解决方案,

纯JS:

/*
input -> object array
searchStr -> string 
keyToSearch -> string array - match to restrict within given keys //eg:['name','id','somekey']
*/
function filterObjectArray(input, searchStr, keysToSearch){
  return input.filter(function(obj){
     var hasMatch = false;
     var hasKeySearch = (keysToSearch && keysToSearch.length)
     for(k in obj){
        if(!hasMatch){
           hasMatch = (!hasKeySearch || (hasKeySearch && keysToSearch.indexOf(k))) && (new RegExp(searchStr, 'gi')).test(obj[k]);
        }
     }
     return hasMatch;
  });
}

console.log(filterObjectArray($scope.array, 'ba')); //[{"name":"bat","id":4},{"name":"ball","id":5}]
console.log(filterObjectArray($scope.array, '1')); //[{"name":"stackoverflow","id":1}]
console.log(filterObjectArray($scope.array, 's', ['name'])); //[{"name":"stackoverflow","id":1},{"name":"sunny","id":2},{"name":"san","id":3}]

使用Angular,

解决方案1:

您可以在方法中使用$filter服务。

$scope.searchString = function(str){
   return $filter('filter')($scope.array, str);
};

解决方案2:

在模板中使用filter

<input type="text" ng-model="searchText" />
<div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>