Can someone help me understand why ng-repeat is behaving differently in my case? When I use ng-repeat with the jsonFile, it prints to the table as expected, but when I try using it with problems, it doesn't print anything. The JSON data is usually loaded from a local directory, but for the sake of CodePen, I included a small JSON variable.
Just to clarify, changing $scope.jsonFile to $scope.problems does work. However, my issue arises when parsing through user input and attempting to display the data afterward. Even though console.log() shows identical outputs for both the original json and parsed json, it still doesn't display properly.
I have inspected the source code, and both $scopes are printed to the console.
https://codepen.io/dneverson/pen/BvLyqW
Main.js
let app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope, $http){
// #################### GLOBALS ####################
$scope.logTime = {};
// #################### FUNCTIONS ##################
//GET JSON FILE
$http.get('./data/Problems2.json').then(function(response) {
$scope.jsonFile = response.data;
console.log($scope.jsonFile);
});
// Rest of the main.js file functions...
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="MyApp">
<head>
<!-- Head section content goes here -->
</head>
<body ng-controller="MyCtrl">
<!-- Body section content goes here -->
</body>
</html>
Main.css
Your CSS styles go here...Problems2.json
Your JSON data goes here...