Having trouble interpreting json with angularjs

Looking at the following code snippet,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dashboard</title>
        <!-- Libs -->
        <script src="angular.js"></script>
        <script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http){
            $http.get('country_codes.json').success(function(data) {
                $scope.countries = data;
            });
        });
        </script>   
    </head>
    <body ng-controller="CountryCtrl">

    </body>
</html>

/* country_codes.json */

[
  {
    "code": "AD",
    "name": "Andorra",
    "population": "84000"
  },
  {
    "code": "AE",
    "name": "United Arab Emirates",
    "population": "4975593"
  }
]

Upon inspection, no errors are found and the callback functions are not being triggered.

What could be causing the failure of the controller callback execution?

Answer №1

Once I included ng-app="countryApp" in the html tag, it started working perfectly for me.

Answer №2

To view error details, include an error function:

<script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http){
              $http.get('country_codes.json')
    .then(function(data) {$scope.countries = data;}
,
          function(data) {console.log("error: "+data)});
 });
 </script>  

Update the JSON to:

{
    "countries": [
     {
    "code": "AD",
    "name": "Andorra",
    "population": "84000"
  },
     {
    "code": "AE",
    "name": "United Arab Emirates",
    "population": "4975593"
  }

    ]  

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for activating and deactivating a numerical input field with a checkbox

Is there a way to create a pair of a checkbox and number field that are linked together? When the checkbox is clicked, it should disable the associated number field. Javascript File: $(document).ready(function(){ $("input[name=check]").click(function(){ ...

Is it possible to verify if each input is unique using the parsley validator?

As a novice, I am struggling with a task where I have 6 School Children IDs. The teacher needs to input these IDs, and while it's not vital for him to enter all of them, he must input at least one. Furthermore, if he decides to input more than one ID, ...

[react]: useMemo will always return the first element from an array if provided as an argument

Take a look at this code snippet export default function App() { const [urls] = React.useMemo( () => ['example.com', 'sample.com'],[] ) return ( <div className="App"> <button onClick={() => c ...

Design layout in Angular Material that wraps the content within it

Is there a way to achieve this specific layout with the "plus" icon positioned below the card layout? https://i.sstatic.net/W5ZRM.png I have attempted the code below: <section layout="column" style="background-color: black;"> <md-c ...

Selenium finds it challenging to interact with an element when using a headless browser, although the code performs well with a user interface browser

I am encountering a problem with clicking on a submenu option in a dropdown menu on my webpage. The dropdown menu is created using 'span' and 'li' elements, and it contains options that have submenus visible when you click on the parent ...

The process of showcasing angularjs ng-repeat with a JSON object

I'm attempting to search for product results using AngularJS. I have retrieved a JSON object with my results, an example of which is shown below: [{"store_id":"17","user_id":"29","company_name":"Liquor R Us","company_type":"Alcohol", "phone":"(303) 5 ...

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

Best practice for creating various custom Jackson deserializers to manage inheritance

When faced with the task of deserializing complex JSON documents using Jackson, I decided to implement custom deserializers to handle inheritance. To determine the appropriate class, I had to analyze the properties of the next node in the JSON tree. This i ...

"Using JavaScript to extract a portion of the URL and perform a redirect

I am attempting to extract a specific part of the URL and then redirect to that particular section. Essentially, what I want is for a script to generate a link that will be opened. This link would appear as . My goal now is to extract the portion of the ...

Microsoft Edge version 41.x is causing issues with cutting off AngularJs 1.x expression markup

Encountering a problem when using basic angular syntax in the Microsoft Edge browser. It appears that Edge cuts off lengthy angular expression markup unexpectedly. As an example: ng-disabled="conditionOne || conditionTwo || conditionThree" Gets shorten ...

Firebase is providing inconsistent data types in JSON responses

Our team is facing an issue while trying to fetch data from FireBase in the form of a 2D array. Despite setting everything up in the same manner, we are encountering different data types in the JSON response. Data provided: [ {"0":24, "1& ...

What are some ways to verify the legitimacy of user input?

Is there a way to verify the validity of a user's input, specifically their email address and password, against a database? I want to retrieve the user's credentials from my website and authenticate them using my 'testlog' database. As ...

JS - Activate the ghost element feature by using the preventDefault function

I am currently working on a project where I need to drag elements from a list of img tags to various svg:rect containers. The process involves using mousedown and mouseup events to track which img is being picked from the list and where it is dropped with ...

Error arises during JSON parsing if the data content contains the `%` symbol

I'm struggling to solve an issue on my website related to a function that downloads articles dynamically. The problem arises when the article contains a % sign, causing a parse error. Can anyone assist me in modifying this function to handle the % sig ...

Storing a photo taken with a camera to a local directory on the computer

Currently, I am utilizing HTML5 inputs to capture a picture from the camera by using the code below: <input id="cameraInput" type="file" accept="image/*;capture=camera"></input> Subsequently, I am obtaining the image in blob format and manip ...

Tips for identifying tablet devices using the deviceDetector module in AngularJS

Having an issue with a Samsung Tablet. I need to display certain content for mobile devices, but not tablets. Device detection results: - isMobile(): true - isTablet(): false Here is the detailed data from the module: {"raw":{"userAgent":"Mo ...

React: Issue with For Loop not recognizing updates in Hook's State

Recently, I successfully created a React application that displays each word of a sentence at a user-defined time interval for fast reading. However, I am now facing a challenge as I attempt to add a pause button functionality to the app. When I press the ...

What could be causing my code to lag by 2 ticks instead of just 1?

Apologies for any spacing issues. Player = { move: function(cycle, opponent) { switch(cycle.current_direction) { case 'up': cycle.y -= cycle.height; break; case 'down': cycle.y += cycle.hei ...

Ways to integrate the toaster library into the logging module seamlessly, bypassing any circular dependency issues within the exception handler

I recently implemented the AngularJS-Toaster library in my project by adding it to my index.html: <link href="lib/angularjs-toaster/toaster.min.css" rel="stylesheet" /> <script src="lib/angularjs-toaster/toaster.min.js"></script> <toa ...

Compressing tool combining Google App Engine with Angular JS

Seeking advice on setting up a minifier, like Google Closure, to integrate with Google App Engine. I am using AngularJS for the client side and have multiple JS files that I want to serve as one minified file during production. How can I achieve this witho ...