Leveraging angular.forEach for JSON Iteration

Question

Leveraging angular.forEach for JSON Iteration

In my app and controller, I am working on creating a "flow chart style" question and answer system. To keep track of the current question and answer, I am using variables like $scope.ActiveQuestion and an array named $scope.ActiveAnswers.

I am struggling to grasp the concept of AngularJS foreach method as I am more familiar with traditional for loops in JavaScript. Despite searching for explanations comparing foreach to for loops, I have come up empty-handed. However, here is what I am attempting to achieve using the foreach method.

For each answerIDs in the current set of

$scope.questions[$scope.ActiveQuestions].answerIDs

, I aim to access the corresponding array in Answers containing that particular idAnswer and then add it to a newly created empty array called $scope.ActiveAnswers. This process will enable me to use ng-repeat in a template to display the necessary answers for that specific question.

Below, you can examine the JSON data alongside my current Controller code:

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

    // Fetch Questions data
    $http.get("includes/getQuestions.php")
    .success(function(response) {
        $scope.Questions = response;
        $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");
    });
    // Fetch Answers data
    $http.get("includes/getAnswers.php")
        .success(function(response) {
            $scope.Answers = response;
        });

    // Assign First Question
    if ($scope.ActiveQuestion == null) {
        $scope.ActiveQuestion = 1;
    };
    $scope.ActiveAnswers = [];
    angular.forEach($scope.Answers, function(idAnswers) {
        angular.forEach($scope.ValidAnswers, function(value) {
            if(value==idAnswers) {
                this.push(Answers)
            };
        });
    },$scope.ActiveAnswers);

});

Questions:

[
    [], {
        "idQuestion": "1",
        "answerIDs": "1",
        "text": "Don't know what to watch?"
    }, {
        "idQuestion": "2",
        "answerIDs": "2,3,4",
        "text": "Okay! First question: How new to anime are you?"
    }, {
        "idQuestion": "3",
        "answerIDs": "5,6,7,8,9,10",
        "text": "So you're new! Awesome, I've got tons of anime for you. But let's get more specific. What type of anime interests you?"
    }, {
        "idQuestion": "4",
        "answerIDs": "11,12,13",
        "text": "Cool, cool. What setting would you like?"
    }
]

I have also compiled an array of answers:

[
    [], {
        "idAnswer": "1",
        "nextQuestion": "2",
        "text": "Click here to get started",
        "animeID": null,
        "checkType": "0"
    }, {
        "idAnswer": "2",
        "nextQuestion": "3",
        "text": "...I've seen some GIFs",
        "animeID": null,
        "checkType": "0"
    }, {
        "idAnswer": "5",
        "nextQuestion": "4",
        "text": "Fantasy Action Adventure",
        "animeID": null,
        "checkType": "0"
    }, {
        "idAnswer": "11",
        "nextQuestion": null,
        "text": "Steampunk (magic, guns, early 1900s)",
        "animeID": "1",
        "checkType": "1"
    }
]

Although no errors are displayed, the ActiveAnswers array remains unfilled. Any assistance on this matter would be highly appreciated.

UPDATE

Furthermore, it is worth mentioning that I initially store my data in a MySQL database and retrieve it using PHP by encoding it into JSON format.

javascript arrays json angularjs angularjs-ng-repeat

Answer 1

Answer №1

To effectively manage your requests, you can utilize the promise feature along with the $q.defer() promise manager.

It is important to note that $http inherently returns a promise.

The $q.defer() function provides 2 essential methods:

resolve(value) : used to resolve the associated promise by providing the final value
reject(reason) : resolves a promise error

In the Controller:

(function(){

function Controller($scope, Service, $q) {


  var defer = $q.defer();

  //creating promises
  var promise1 = Service.get('includes/getQuestions.php"');

  var promise2 = Service.get('includes/getAnswers.php');

  //Creating promise using $q
  var promiseAnswer = defer.promise;

  if ($scope.ActiveQuestion == null) {
      $scope.ActiveQuestion = 1;
  };

  //Retrieving data from promise1 & promise2
  $q.all([promise1, promise2]).then(function(response){
    //Getting question data
    $scope.Questions = response[0].data;
    //Getting answer data
    $scope.Answers = response[1].data;
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");
    $scope.ActiveAnswers = [];

    $scope.Answers.forEach(function(elm){
      $scope.ValidAnswers.forEach(function(value){
        //Accessing elm.idAnswer instead of just elm
        if (value === elm.idAnswer){
          $scope.ActiveAnswers.push(value);
        }
      });
    });

    //Resolving our data
    defer.resolve($scope.ActiveAnswers);

  });

  //Once all data is processed, retrieve the data
  promiseAnswer.then(function(data){
    console.log(data);
  });

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Additionally, it is recommended to use a Service for processing requests:

Service

(function(){

  function Service($http){

    function get(url){
      //Returns a promise with the specified URL
      return $http.get(url);
    }

    var factory = {
      get: get
    };

    return factory;

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

When dealing with multiple asynchronous requests, utilizing promise and $q.defer() is considered a best practice.

Answer 2

To effectively manage your requests, you can utilize the promise feature along with the $q.defer() promise manager.

It is important to note that $http inherently returns a promise.

The $q.defer() function provides 2 essential methods:

resolve(value) : used to resolve the associated promise by providing the final value
reject(reason) : resolves a promise error

In the Controller:

(function(){

function Controller($scope, Service, $q) {


  var defer = $q.defer();

  //creating promises
  var promise1 = Service.get('includes/getQuestions.php"');

  var promise2 = Service.get('includes/getAnswers.php');

  //Creating promise using $q
  var promiseAnswer = defer.promise;

  if ($scope.ActiveQuestion == null) {
      $scope.ActiveQuestion = 1;
  };

  //Retrieving data from promise1 & promise2
  $q.all([promise1, promise2]).then(function(response){
    //Getting question data
    $scope.Questions = response[0].data;
    //Getting answer data
    $scope.Answers = response[1].data;
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");
    $scope.ActiveAnswers = [];

    $scope.Answers.forEach(function(elm){
      $scope.ValidAnswers.forEach(function(value){
        //Accessing elm.idAnswer instead of just elm
        if (value === elm.idAnswer){
          $scope.ActiveAnswers.push(value);
        }
      });
    });

    //Resolving our data
    defer.resolve($scope.ActiveAnswers);

  });

  //Once all data is processed, retrieve the data
  promiseAnswer.then(function(data){
    console.log(data);
  });

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Additionally, it is recommended to use a Service for processing requests:

Service

(function(){

  function Service($http){

    function get(url){
      //Returns a promise with the specified URL
      return $http.get(url);
    }

    var factory = {
      get: get
    };

    return factory;

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

When dealing with multiple asynchronous requests, utilizing promise and $q.defer() is considered a best practice.

Answer 3

Answer №2

I suggest creating a structure named "Solution" in your code, storing it in an array, and iterating through it like this:

[
 ["Question"],
   ["Solution"]
   {
    "idSolution": "1",
    "nextStep": "2",
    "description": "Click here to begin",
    "animeID": null,
    "validationType": "0"
   },
]

This approach will ensure the loop runs smoothly without any issues.

Answer 4

I suggest creating a structure named "Solution" in your code, storing it in an array, and iterating through it like this:

[
 ["Question"],
   ["Solution"]
   {
    "idSolution": "1",
    "nextStep": "2",
    "description": "Click here to begin",
    "animeID": null,
    "validationType": "0"
   },
]

This approach will ensure the loop runs smoothly without any issues.

Answer 5

Answer №3

Thanks to the collaborative effort of everyone here, I successfully resolved the issues with my code without making any changes to the database. I managed to fix the problems with the foreach loops and although there are still some issues remaining, the main challenges in this task have been addressed. Below is the updated version of my code snippet.

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

// Setting the initial active question
if ($scope.ActiveQuestion == null) {
    $scope.ActiveQuestion = 1;
};
// Retrieving questions data
$http.get("includes/getQuestions.php").success(function(responseQuestions) {
    $scope.Questions = responseQuestions;
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");

    // Retrieving answers data
    $http.get("includes/getAnswers.php").success(function(responseAnswers) {
        $scope.Answers = responseAnswers;
        $scope.getActiveAnswers();
    });
});

$scope.getActiveAnswers = function() {
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");
    $scope.ActiveAnswers = [];
    angular.forEach($scope.ValidAnswers, function(answerid) {
        angular.forEach($scope.Answers, function(answer) {
            if (answer.idAnswer == answerid) {
                $scope.ActiveAnswers.push(answer);
              };
          });

      }, $scope.ActiveAnswers);
}

$scope.answerclick = function(nextQuestion) {
    $scope.ActiveQuestion = nextQuestion;
    $scope.getActiveAnswers();
};

});

Answer 6

Thanks to the collaborative effort of everyone here, I successfully resolved the issues with my code without making any changes to the database. I managed to fix the problems with the foreach loops and although there are still some issues remaining, the main challenges in this task have been addressed. Below is the updated version of my code snippet.

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

// Setting the initial active question
if ($scope.ActiveQuestion == null) {
    $scope.ActiveQuestion = 1;
};
// Retrieving questions data
$http.get("includes/getQuestions.php").success(function(responseQuestions) {
    $scope.Questions = responseQuestions;
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");

    // Retrieving answers data
    $http.get("includes/getAnswers.php").success(function(responseAnswers) {
        $scope.Answers = responseAnswers;
        $scope.getActiveAnswers();
    });
});

$scope.getActiveAnswers = function() {
    $scope.ValidAnswers = $scope.Questions[$scope.ActiveQuestion].answerIDs.split(",");
    $scope.ActiveAnswers = [];
    angular.forEach($scope.ValidAnswers, function(answerid) {
        angular.forEach($scope.Answers, function(answer) {
            if (answer.idAnswer == answerid) {
                $scope.ActiveAnswers.push(answer);
              };
          });

      }, $scope.ActiveAnswers);
}

$scope.answerclick = function(nextQuestion) {
    $scope.ActiveQuestion = nextQuestion;
    $scope.getActiveAnswers();
};

});

Leveraging angular.forEach for JSON Iteration

Answer №1

Answer №2

Answer №3

Similar questions

Execute command problem

Implementing image loading within an accordion component using React and Material UI

What steps do I need to take to transform this click event function into one that is triggered automatically upon the div loading?

Ways to randomize an array without any repeating elements with the help of jQuery?

If I don't utilize a promise for my trigger.io AJAX request, the value of AngularJS $rootScope will not

Issue with clientHeight not functioning properly with line breaks in Angular 2 application after ngAfterViewInit

How to manage form submissions in Vue.js using inputs within child components

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

Saving form data with a tinymce textarea, radio button, and checkbox to the database

This function is designed to only work under specific conditions

Is it possible to include array elements in a dropdown menu using React?

An issue occurred while attempting to serialize or deserialize data with the JSON JavaScriptSerializer. The length of the string exceeds the allowable limit

Struggling to integrate a JavaScript sdk with an Angular2 application due to missing dependencies

Creating a map with multiple markers by utilizing JSON, PHP, and Google Maps API Version 2

Fade-in a new, revised text after fading-out the original text in ReactJS

Using the "this" keyword is required for an Angular Service-created function

Utilizing Regular Expressions in AngularJS to validate name, a 10-digit mobile number, and a 12-digit number through the ng-blur event and match

use php code to dynamically populate a select dropdown element with jquery

How do I ensure that a nested <button> in AngularJS does not submit the form it is contained in?

Parse a string and generate an array using regular expressions in JavaScript/Node.js