Filter data with AngularJS from JSON file

Question

I am creating a "word of the day" functionality in a web app and I have a JSON file with the following data structure. I couldn't get myself to dump 730+ entries into the HTML under ng-init to filter by day.

{"words":[ { "day":"0", "aramaic":"mi<u>t</u>ra", "english":"rain" }, { "day":"1", "aramaic":"libba", "english":"heart" }] }

I have the JSON file being called in the controller and trying to bring it in via scope.

$http.get('content/words.json').success(function(data) {
    var pairNum, prevPage, nextPage;    
    pairNum = 1;

        $scope.word = {
            all:data,
            day:parseInt(data.words[pairNum]["day"]),
            eng:data.words[pairNum]["english"],
            cha:data.words[pairNum]["aramaic"],
            limit:data.words.length
        }   

});

To my demise, I am unable to bring the JSON data to the HTML via $scope.word.all to filter. I would greatly appreciate help here, or a different way to architect this solution if I am approaching it wrong.

Here is how the HTML looks

<div class="row" ng-init="words = word.all">
<h2>CHALDEAN WORD OF THE DAY</h2>
<div class="small-2 columns"><a ng-click="word.day = word.day - 1"><span ng-show="word.day > 1" class="foundicon-left-arrow"> &nbsp;<span></a></div>
<div class="small-8 columns" ng-repeat="word in words | filter:word.day"><h4 class="wotd">{{word.english}} :: {{word.chaldean}} :: {{word.day}}<h4></div>
<div class="small-2 columns"><a ng-click="word.day = word.day + 1"><span ng-show="word.day < word.limit" class="foundicon-right-arrow"> &nbsp;<span></a></div></div><!-- .row -->

Thank you in advance to all that will attempt.

Ps. I already have a feeling I will be screwed with the <u> in the JSON.

sylwester · Accepted Answer · 2014-06-24 16:07:13Z

1

Please have a look here : plnkr

html:

      <h2>CHALDEAN WORD OF THE DAY</h2>
    <div class="small-2 columns">
    <a ng-click="pairNum = pairNum -1">
    <span ng-show="pairNum > 0" class="foundicon-left-arrow"> previous <span></a></div>

    <div class="small-8 columns" ng-repeat="w in word | filter:{day:pairNum} ">
    <h4 class="wotd">
      {{w.english}} :
    : {{w.aramaic}} :
    : {{w.day}}
    <h4>

    </div>
    <div class="small-2 columns">
    <a ng-click="pairNum = pairNum + 1">
    <span ng-show="pairNum < word.limit-1" class="foundicon-right-arrow"> next <span></a>

</div></div><!-- .row -->

js:

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

    app.controller('MainCtrl', function($scope, $http) {

    $scope.pairNum = 0;
    $scope.words = [];

    $http.get('content/words.json').success(function(data) {

     angular.copy(data, $scope.words );

     });

});

edited Jun 24, 2014 at 16:07

answered Jun 24, 2014 at 8:46

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alen Giliana Over a year ago

Thank you, but the missing piece is still how to connect the JSON file to the scope. I am anticipating around 730 words.

Collectives™ on Stack Overflow

Filter data with AngularJS from JSON file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related