Agnes Agnes - 11 months ago 35
Javascript Question

how to get json data in order with AngularJS

I am new with

, I wanna build an eCommerce website, in my case, I wanna get all
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
part is a big problem, but I still have no idea to get these recipes in order.

Here is my html file.

<script type="text/javascript" src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src="H:/job/Xmapp/htdocs/AngularJs/recipesController3.js"></script>
<link rel="stylesheet" href="H:/job/Xmapp/htdocs/AngularJs/imgStyle.css">
<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> {{|uppercase}}</h4>
<p>4 Serves</p>
<table class="table_style">
<td>- {{recipes.IngredientMapping[0]}}</td>
<td>- {{recipes.IngredientMapping[1]}}</td>
<td>- {{recipes.IngredientMapping[2]}}</td>
<td>- {{recipes.IngredientMapping[3]}}</td>
<a href="/" class="dotStyle"><strong>....</strong></a>
<img class="img" ng-src="{{recipes.Image[0].id}}/{{recipes.Image[0].attachment}}">

here is my Controller.js

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

myApp.controller('mainController', function ($scope, $http) {
// delete $http.defaults.headers.common['X-Requested-With'];
$scope.listOfRecipe = null;
$scope.listOfIngredient = Array();
$scope.listOfrecipes = Array();
var url = "";
var url2 = "";

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

$scope.listOfIngredient = new Array(recipeLength);

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

for (var i = 0; i < recipeLength; i++) {
//access to different individual recipe with recipe id

function another_call(Recipeid) {
$ + Recipeid + ".json", null).then(function (response2) {
var one_recipe =


Answer Source

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)
   $ Recipeid +".json", null).then(function (response2) {
       var next = others.pop();
       if (next != null) another_call(, others);

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.