<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="JsonController">
<div>
<label>Search Word</label>
<input type="text" name="lemma" ng-model="searchText" />
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Word</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="word in words | filter:searchText">
<td>{{ word.lemma }} {{ word.ipa }}</td>
<td style="display:none;">{{ word.s_lemma }} {{ word.s_ipa }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('JsonController', function($scope, $http){
$http.get('words.json').success(function(data) {
var words = [];
for (i = 0; i < data.length; i++) {
words.push({
lemma: data[i].lemma,
ipa: data[i].ipa,
s_lemma: data[i].lemma.replace(/ˈ/g, ''),
s_ipa: data[i].ipa.replace(/ˈ/g, '')
})
}
$scope.words = words;
});
});
/* Styles go here */
[{"lemma":"челове́к", "ipa":"t͡ɕɪlɐvʲˈek"},
{"lemma":"World", "ipa":"Cupˈek"},
{"lemma":"Chicken", "ipa":"Pravda"},
{"lemma":"Caspian", "ipa":"Sea"},
{"lemma":"የሚያስፈራው", "ipa":"የማይታየውን"}]