각도를 사용하여 JSON을 통해 검색

각도로 JSON을 검색하려고합니다. 이 방법에 대해 웹에서 여러 자습서를 찾았지만 지금은 문제가 무엇인지 알 수없는 문제가 있습니다. Chrome에서 디버거를 사용해 보았는데 JS를 완전히 통과 한 것으로 보이지만 아무 것도 표시되지 않습니다.각도를 사용하여 JSON을 통해 검색

초보자입니다. 몇 가지 분명한 실수가 있다면 저를 용서해주십시오.

<!DOCTYPE html> 
<!doctype html> 
<html ng-app="spellSearch"> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="spellSearch.js"></script> 
    </head> 
    <body> 
    <div ng-controller="spellSearchCtrl"> 
     <label>Name:</label> 
     <input type="text" ng-model="searchString" placeholder="Enter any spell information"> 
     <ul ng-repeat="i in jsonSpellData | filter:searchString"> 
      <li> 
      Name: {{i.name}} <br> 
      Description: {{i.desc}} <br> 
      Page Number: {{i.page}} <br> 
      Range: {{i.range}} <br> 
      Components: {{i.components}} <br> 
      Material: {{i.material}} <br> 
      Ritual: {{i.ritual}} <br> 
      Duration: {{i.duration}} <br> 
      Concentration: {{i.concentration}} <br> 
      Casting Time: {{i.casting_time}} <br> 
      Level: {{i.level}} <br> 
      School: {{i.school}} <br> 
      Class: {{i.class}} 
     </li> 
     </ul> 
    </div> 
    </body> 
</html>

자바 스크립트 JSON

var jsonSpellData = [ 
    { 
    "name":"Abi-Dalzim's Horrid Wilting", 
    "desc":"<p>You draw the moisture from every creature in a 30-foot cube centered on a point you choose within range. Each creature in that area must make a Constitution saving throw. Constructs and undead aren't affected, and plants and water elementals make this saving throw with disadvantage. A creature takes 10d8 necrotic damage on a failed save, or half as much damage on a successful one.You hurl a bubble of acid. Choose one creature within range, or choose two creatures within range that are within 5 feet of each other. A target must succeed on a Dexterity saving throw or take 1d6 acid damage.</p><p>This spells damage increases by 1d6 when you reach 5th Level (2d6), 11th level (3d6) and 17th level (4d6).</p>", 
    "page":"ee pc 15", 
    "range":"150 feet", 
    "components":"V, S, M", 
    "material":"A bit of sponge.", 
    "ritual":"no", 
    "duration":"Instantaneous", 
    "concentration":"no", 
    "casting_time":"1 action", 
    "level":"8th-level", 
    "school":"Necromancy", 
    "class":"Sorcerer, Wizard" 
    }, 
    { 
    "name":"Absorb Elements", 
    "desc":"<p>The spell captures some of the incoming energy, lessening its effect on you and storing it for your next melee attack. You have resistance to the triggering damage type until the start of your next turn. Also, the first time you hit with a melee attack on your next turn, the target takes an extra 1d6 damage of the triggering type, and the spell ends.</p>", 
    "higher_level":"<p>When you cast this spell using a spell slot of 2nd level or higher, the extra damage increases by 1d6 for each slot level above 1st.</p>", 
    "page":"ee pc 15", 
    "range":"Self", 
    "components":"S", 
    "ritual":"no", 
    "duration":"1 round", 
    "concentration":"no", 
    "casting_time":"1 action", 
    "level":"1st-level", 
    "school":"Abjuration", 
    "class":"Druid, Ranger, Wizard" 
    } 
];

출처

2016-06-16 Tyz

가능한 복제 (http://stackoverflow.com/questions/1946165/json-find-in-javascript) 또는 http : // http://tackoverflow.com/questions/525883/javascript-find-json-value 또는 http://stackoverflow.com/questions/5288833/how-to-search-json-tree-with-jquery 또는 http://stackoverflow.com/questions/19253753/javascript-find-json-value 질문/18910976/json-searching-through-keys-with-variable-names-unknown 또는 http://stackoverflow.com/questions/10679580 – Ryan

이름으로 검색 하시겠습니까? 각도는 ng-repeat에서 자신의 필터를 가졌을 수도 있습니다. –

당신은 NG 반복 내에서 직접 데이터를 필터링 할 수의

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

app.controller('spellSearchCtrl', function($scope, $http){ 
    $http.get('spells.json').success(function(data, status, headers, config){ 
     $scope.items = data.data; 
    }).error(function(data, status, headers, config){ 
     console.log("No data found..."); 
    }); 
}); 

app.filter('searchFor', function(){ 
    return function(arr, searchString){ 
     if(!searchString){ 
      return arr; 
     } 
     var result = []; 
     searchString = searchString.toLowerCase(); 
     angular.forEach(arr, function(item){ 
      if(item.name.toLowerCase().indexOf(searchString) !== -1){ 
       result.push(item); 
      } 
      else { 
       result.push("No results."); 
      } 
     }); 
     return result; 
    }; 
});

부 :

여기에 내 코드

HTML입니다. 맞춤 필터를 모두 제거하기 만하면됩니다.

필터링 된 맞춤법 만 표시되도록 ng-if = "searchString"을 추가 할 수도 있습니다.

출처

2016-06-16 20:15:01 gyc

function spellSearchCtrl() { 
 
    this.jsonSpellData = [ { "name":"Abi-Dalzim's Horrid Wilting" }, { "name":"Absorb Elements" } ]; 
 
} 
 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('spellSearchCtrl', spellSearchCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="spellSearchCtrl as spell"> 
 
     <label>Name:</label> 
 
     <input type="text" ng-model="searchString" placeholder="Enter any spell information"> 
 
     <ul ng-if="searchString" ng-repeat="i in spell.jsonSpellData | filter:searchString"> 
 
      <li> 
 
      Name: {{i.name}} 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

<input type="text" ng-model="searchString" placeholder="Enter any spell information"> 
    <ul ng-if="searchString" ng-repeat="i in spell.jsonSpellData | filter:searchString"> 
     <li> 
     Name: {{i.name}} 
     </li> 
    </ul>

는 언제든지 JSON 파일에서
https://jsonformatter.curiousconcept.com/
제거 할당 및 세미콜론으로 JSON을 확인합니다.

[ 
    { 
    "name":"Abi-Dalzim's Horrid Wilting", 
    "desc":"<p>You draw the moisture from every creature in a 30-foot cube centered on a point you choose within range. Each creature in that area must make a Constitution saving throw. Constructs and undead aren't affected, and plants and water elementals make this saving throw with disadvantage. A creature takes 10d8 necrotic damage on a failed save, or half as much damage on a successful one.You hurl a bubble of acid. Choose one creature within range, or choose two creatures within range that are within 5 feet of each other. A target must succeed on a Dexterity saving throw or take 1d6 acid damage.</p><p>This spells damage increases by 1d6 when you reach 5th Level (2d6), 11th level (3d6) and 17th level (4d6).</p>", 
    "page":"ee pc 15", 
    "range":"150 feet", 
    "components":"V, S, M", 
    "material":"A bit of sponge.", 
    "ritual":"no", 
    "duration":"Instantaneous", 
    "concentration":"no", 
    "casting_time":"1 action", 
    "level":"8th-level", 
    "school":"Necromancy", 
    "class":"Sorcerer, Wizard" 
    }, 
    { 
    "name":"Absorb Elements", 
    "desc":"<p>The spell captures some of the incoming energy, lessening its effect on you and storing it for your next melee attack. You have resistance to the triggering damage type until the start of your next turn. Also, the first time you hit with a melee attack on your next turn, the target takes an extra 1d6 damage of the triggering type, and the spell ends.</p>", 
    "higher_level":"<p>When you cast this spell using a spell slot of 2nd level or higher, the extra damage increases by 1d6 for each slot level above 1st.</p>", 
    "page":"ee pc 15", 
    "range":"Self", 
    "components":"S", 
    "ritual":"no", 
    "duration":"1 round", 
    "concentration":"no", 
    "casting_time":"1 action", 
    "level":"1st-level", 
    "school":"Abjuration", 
    "class":"Druid, Ranger, Wizard" 
    } 
]

HTML 파일

<html ng-app="spellSearch"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Angular.js JSON Fetching Example</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <script> 
    var app = angular.module('spellSearch', []); 
     app.controller('spellSearchCtrl', function ($scope, $http){ 
     $http.get('spells.json').success(function(data) { 
      $scope.spells = data; 
     }); 
     }); 
    </script> 
    </head> 
    <body ng-controller="spellSearchCtrl"> 
    <h2>Angular.js JSON Fetching Example</h2> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="searchString" placeholder="Enter any spell information"> 
     <ul ng-repeat="i in spells | filter:searchString"> 
      <li> 
      Name: {{i.name}} <br> 
      Description: {{i.desc}} <br> 
      Page Number: {{i.page}} <br> 
      Range: {{i.range}} <br> 
      Components: {{i.components}} <br> 
      Material: {{i.material}} <br> 
      Ritual: {{i.ritual}} <br> 
      Duration: {{i.duration}} <br> 
      Concentration: {{i.concentration}} <br> 
      Casting Time: {{i.casting_time}} <br> 
      Level: {{i.level}} <br> 
      School: {{i.school}} <br> 
      Class: {{i.class}} 
     </li> 
     </ul> 
    </div> 
    </body> 
</html>

[JSON 자바 스크립트에서 찾을]의

출처

2016-06-16 21:15:48

각도를 사용하여 JSON을 통해 검색

답변

관련 문제