I am currently working on integrating a JSON file into my project, which will eventually be accessed through an API from a server. Right now, I am pulling data directly from an object.
My goal is to build an HTML file that features a table with navigation tabs for each header element. Each tab should also include a search box and a submit button.
The initial state of the table should be empty. When a user searches for a specific value (such as ID, nickname, email, etc) within one of the headers, the table should populate with the JSON data that matches or contains part of the search query.
As a newcomer to Angular syntax, I am struggling to conceptualize how this functionality should be implemented within the framework.
(function() {
var app = angular.module('tool', []);
app.controller('searchController', function() {
this.info = data.people;
this.findId = function(idInput) {
angular.forEach(that.id, function(value, key) {
if (value.contains(idInput)) {
// Unsure about what code needs to go here.
}
});
};
});
var data = {
"people": [{
"id": "2245231",
"nickname": "heyyman",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be2e5ede4cbece6eae2e7a5e5eeff">[email protected]</a>",
"lastIp": "127.0.0.1",
"regIp": "127.0.0.1",
}, {
"id": "2245232",
"nickname": "heyyman2",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b0b7bfb6eb99beb4b8b0b5f7b7bcad">[email protected]</a>",
"lastIp": "127.0.0.2",
"regIp": "127.0.0.2",
}
};
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main>
<table ng-controller="searchController as search">
<thead>
<tr id="tableNavigation">
<td></td>
<td>ID
<input type="text" ng-model="idInput">
<input type="submit" ng-click="findId(idInput)">
</td>
<td>Nickname</td>
<td>Login / Email</td>
<td>Last IP</td>
<td>Registration IP</td>
</tr>
</thead>
<tbody id="tableCanvas">
<tr ng-repeat="people in search.info" ng-class-even="'even'">
<td></td>
<td>{{people.id}}</td>
<td>{{people.nickname}}</td>
<td>{{people.email}}</td>
<td>{{people.lastIp}}</td>
<td>{{people.regIp}}</td>
</tr>
</tbody>
</table>
</main>This is the progress I have made so far, along with a link to the JSFiddle sandbox where you can see the implementation.
If you find any confusion or lack of clarity in my explanation, please let me know.