After spending countless hours scouring various stackoverflow pages, I am still unable to find a solution. I will do my best to provide a detailed explanation, but please feel free to ask for more information if needed.
The main issue at hand is my attempt to retrieve a .json file using $http GET. Once the file is obtained, I aim to store it in $scope.bags and then access its contents on the HTML page to utilize the title, details, images, and other data.
Let's begin with the controller:
munyApp.controller('productController', ['$scope', '$location', '$http',
function ($scope, $location, $http) {
var $url2parse = $location.path();
var $urlSplit = $url2parse.split("/");
var $bag2show = $urlSplit.pop();
var $bag2showString = String($bag2show);
console.log($bag2showString);
$http({method: 'GET', url: 'handbags/n1-black-details.json'}).success(function(data) {
$scope.bags = data;
console.log($scope.bags);
$scope.message = "it works!";
});
For now, let's set aside the random var lines. I will address them later, as they might not be relevant to the current issue.
Here is a snippet of the HTML where the controller is implemented:
<div id="detail_large_container" ng-controller="productController">
{{bags.id}}
{{bags['id']}}
</div>
Unfortunately, I am struggling to display the id value, which should be "n1-black".
While this may appear simple (and it probably is, given my limited experience), what confounds me is that I successfully implemented a similar procedure with another controller. However, when I attempted to replicate the process with this new controller, it failed to deliver the expected outcome.
Below is an example of another controller that IS functioning correctly:
munyApp.controller('handbagsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('handbags/bagsfull.json').success(function(data) {
$scope.bags = data;
});
}]);
In the above controller, the json file was retrieved without issues, and its contents were easily accessed in the HTML page using {{bags.somekey}}.
Some observations that raised questions:
- With my new controller, using the $http.get() syntax resulted in a failure to fetch the .json file. The issue was resolved only after switching to the $http({method: 'GET', url: ''}) format. Why the change was necessary remains unclear, especially since all controllers are contained within the same .js file, and older controllers had no trouble with $http.get().
- Upon setting $scope.bags to the fetched data from the .json file, a $console.log($scope.bags) revealed successful retrieval in the Chrome console. Despite this, attempting to use the data in the HTML rendered it blank.
- To test, I included $scope.message = "it works" inside the $http.success function. Displaying {{$scope.message}} in the HTML produced the expected result. This indicates correct usage of $scope, raising further confusion as to why the .json retrieval is successful yet the HTML fails to utilize the data.
- Lastly, the seemingly random var declarations in the controller code were aimed at extracting the segment of the URL following the last "/". This utilized standard JS functionality, which I believed to be appropriate. Could this be a contributing factor?
Any assistance or insights you can offer would be greatly appreciated. Feel free to request additional information if necessary!
As requested, the contents of the .json file are provided below:
[
{
"id": "n1-black",
"title": "n°1 (Black)",
"description": "TOTE IN TEXTURED CALFSKIN\\nBLACK\\n001",
"images": [
"images/handbags/details/n1-black-1.jpg",
"images/handbags/details/n1-black-2.jpg",
"images/handbags/details/n1-black-3.jpg",
"images/handbags/details/n1-black-4.jpg"
]
}
]