how to get json data in order with AngularJS

Question

I am new with AngularJS, I wanna build an eCommerce website, in my case, I wanna get all JSON data of recipes and show some detail information on grid box, just like this this is what I want,please click here to see what's here but I have a some problems here, each time the page shows each recipe in different order (seems like random order) , which certainly cause the page to shows different recipes(I just need to show 8 recipes here) in recipes block, so I guess my JavaScript part is a big problem, but I still have no idea to get these recipes in order.

Here is my html file.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="H:/job/Xmapp/htdocs/AngularJs/recipesController3.js"></script>
    <link rel="stylesheet" href="H:/job/Xmapp/htdocs/AngularJs/imgStyle.css">
</head>
<body>
<div ng-app="myApp" ng-controller="mainController" class="center">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3" ng-repeat="recipes in listOfrecipes |limitTo:8   track by $index">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="name"><h4> {{ recipes.Recipe.name|uppercase}}</h4>
                            <p>4 Serves</p>
                            <h4>MAIN INGREDIENT :</h4>
                            <table class="table_style">
                                <tr>
                                    <td>- {{recipes.IngredientMapping[0].Ingredient.name}}</td>
                                    <td>- {{recipes.IngredientMapping[1].Ingredient.name}}</td>
                                </tr>
                                <tr>
                                    <td>- {{recipes.IngredientMapping[2].Ingredient.name}}</td>
                                    <td>- {{recipes.IngredientMapping[3].Ingredient.name}}</td>
                                </tr>
                            </table>
                            <br>
                            <div>
                                {{recipes.Recipe.directions|limitTo:100}}
                                <a href="/" class="dotStyle"><strong>....</strong></a>
                            </div>
                            <div>
                                <img class="img" ng-src="http://164.132.196.117/chop_dev/recipe/files/image/attachment/{{recipes.Image[0].id}}/{{recipes.Image[0].attachment}}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
</body>
</html>

here is my Controller.js

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

myApp.controller('mainController', function ($scope, $http) {
    console.log('dddddd');
    // delete $http.defaults.headers.common['X-Requested-With'];
    $scope.listOfRecipe = null;
    $scope.listOfIngredient = Array();
    $scope.listOfrecipes = Array();
    var url = "http://164.132.196.117/chop_dev/recipe/recipes.json";
    var url2 = "http://164.132.196.117/chop_dev/recipe/recipes/view/";

    function first_call() {
        return $http({
            method: 'GET',
            url: url
        }).then(function (response) {
            var wait_it = false;
            $scope.listOfRecipe = response.data.recipes;
            //to get how many recipes in total in json file
            console.log($scope.listOfRecipe);
            var recipeLength = $scope.listOfRecipe.length;

            $scope.listOfIngredient = new Array(recipeLength);

            for (var j = 0; j < 100; j++) {
                $scope.listOfIngredient[j] = Array();
            }

            console.log(recipeLength);
            for (var i = 0; i < recipeLength; i++) {
                //access to different individual recipe with recipe id
                another_call($scope.listOfRecipe[i].Recipe.id);
            }
        });
    }

    function another_call(Recipeid) {
        $http.post(url2 + Recipeid + ".json", null).then(function (response2) {
            var one_recipe = response2.data.recipe
            $scope.listOfrecipes.push(one_recipe);
        });
        console.log($scope.listOfrecipes);
    }

    first_call();
});

Can we see an example of the "json" data? JSON does not have an order in JavaScript. — Matt Lishman
– Matt Lishman, Commented Aug 24, 2016 at 11:14
I think the service should return an ordered json, but, have you tried "order by" in angular? docs.angularjs.org/api/ng/filter/orderBy — Ricardo Pontual
– Ricardo Pontual, Commented Aug 24, 2016 at 11:23
Agnes, just so you are aware, data returned from asynchronous events are not necessarily guaranteed an "order". The returned JSON object could and most likely will have a different order on each run of the operation. — Evan Bechtol
– Evan Bechtol, Commented Aug 24, 2016 at 11:24
this is my recipe 164.132.196.117/chop_dev/recipe/recipes.json,http://…, for example :164.132.196.117/chop_dev/recipe/recipes/view/4.json — Agnes
– Agnes, Commented Aug 24, 2016 at 12:00
yes, I understood data returned from asynchronous events are inorder, but I have to keep the 8 recipes in pages are exactly same as previous refresh, I need to keep recipes with id=1 to 8 always are there. — Agnes
– Agnes, Commented Aug 24, 2016 at 12:13

Rohit · Accepted Answer · 2016-08-24 12:01:25Z

1

use orderBy filter of angular while displaying data.

https://docs.angularjs.org/api/ng/filter/orderBy

answered Aug 24, 2016 at 12:01

Rohit

931 silver badge6 bronze badges

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

1 Comment

Agnes Over a year ago

Thanks a lot, I am trying this way,should be working

Ikechi Michael · Accepted Answer · 2016-08-24 12:14:25Z

0

Like others have said, using a filter is probably best. However, if you insist on ordering the http requests, use this as the another_call function

function another_call(Recipeid, others)
{
   $http.post(url2+ Recipeid +".json", null).then(function (response2) {
       var one_recipe=response2.data.recipe
       $scope.listOfrecipes.push(one_recipe);
       var next = others.pop();
       if (next != null) another_call(next.Recipe.id, others);
       console.log($scope.listOfrecipes);
   });
}

In the first_call's then function, rather than loop through $scope.listOfRecipe, use the following code instead:

$scope.listOfRecipe = $scope.listOfRecipe.reverse();
if ($scope.listOfRecipe.length > 0) {
   another_call($scope.listOfRecipe.pop().Recipe.Id, $scope.listOfRecipe);
}

It's supposed to recurse within the promise resolution, where $scope.listOfRecipe still has values. That should let you make the http requests in order.

Note: I haven't tested the code.

answered Aug 24, 2016 at 12:14

Ikechi Michael

4893 silver badges6 bronze badges

1 Comment

Ikechi Michael Over a year ago

I'm glad i could help.

jayanthCoder · Accepted Answer · 2016-08-24 11:18:03Z

0

In this line ---ng-repeat="recipes in listOfrecipes |limitTo:8 track

have a orderBy

if required have a custom order function and order it the way you want This will ensure order will never change provided JSON data is constant

answered Aug 24, 2016 at 11:18

jayanthCoder

9011 gold badge7 silver badges14 bronze badges

1 Comment

Evan Bechtol Over a year ago

Having a code example will improve the quality of your answer, in this case.

Collectives™ on Stack Overflow

how to get json data in order with AngularJS

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related