Retrieving a JSON file using AngularJS

I have been attempting to utilize AngularJS to display data from a JSON file, but I am encountering some issues. Despite trying multiple times and even copying examples from others, I still can't seem to identify the problem. I would greatly appreciate any assistance in resolving this issue. Below is my HTML file:

<html>
   <head>
      <title>Angular JS Includes</title>

   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

   </body>
</html>

todos.json:

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Answer №1

Make sure to include your angular script above the code snippet.

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>
  var MyApp = angular.module('MyApp', []);

  MyApp.controller('ListCtrl', function($scope, $http) {
     $http.get('list.json')
       .then(function(response){
          $scope.items = response.data;                
        });
  });
 </script>

View Demo

Answer №2

In order to ensure your custom script functions correctly, it is important to include the angular script before it or utilize the onload function to wait for the document to fully load.

<html>
   <head>
      <title>Angular JS Includes</title>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get("https://api.myjson.com/bins/zx3wn")
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

   </body>
</html>

Answer №3

Switching to Mozilla browser did the trick! Grateful for your assistance and replies.

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

Ways to submit radio button and checkbox choices? Managing form with the help of php and javascript

I'm struggling to add radio buttons and checkboxes to my HTML form in a way that the selections get posted correctly. The form is managed by PHP and JavaScript. Despite my efforts, I can't seem to make these additions work. Here's the code ...

I am encountering some difficulties with the functionality of the angularjs dialog

I've been attempting to integrate an AngularJS dialog feature into my application by following the examples provided on material.angularjs.org. However, despite copying everything accurately, I am unable to get it to function. Can anyone help identify ...

There seems to be an issue with the functionality of updating and creating in Kendo

While the grid is reading rows correctly, encountering issues with updating and creating data. The controller doesn't seem to be invoked at all. Kindly review the provided code to identify any errors. The JSON response from the read webservice is ...

The React-FontAwesome icon is unable to display when a favicon has been set

I encountered an issue while using the react-fontawesome module to display brand icons. Whenever I set a favicon in <Head>...</Head> (imported from next/head), all the react-fontawesome icons disappear. Can someone please advise me on how to re ...

Do we need to specify ngRoute in the angular module configuration?

Being new to angular.js, I have a question about ngRoute - is it necessary to define it on the angular module? From what I understand, it is required if we want to update the view based on URL changes. But can we also manually define routes and return vi ...

How can I use jQuery to add animation to the coloring of an SVG graphic?

I want to create a dynamic animation for my SVG using jQuery. I aim to first animate the path of the SVG, and then after the initial animation, I would like to animate the fill of the SVG with specified duration and easing function. Is it possible to achi ...

When adjusting the data source, the Kendo PanelBar in AngularJS using ng-Repeat fails to display properly

Having issues with Kendo PanelBar while using ng-repeat and dynamically modifying the datasource! Check out this quick demo: Once you click on "Add new album," a new item is added to the panelbar but it is not rendering correctly. Best regards, Daniel ...

Can the <input type="file"> element trigger File Explorer to open automatically?

Is it possible for the input type "file" to automatically open file explorer, or is jquery/javascript required to trigger the File Explorer dialog? Any tips or tricks on how to achieve this would be greatly appreciated! Thank you in advance for your assis ...

Challenges Encountered with jQuery/AJAX Form Processing

I am currently facing an issue with two files in my project. The main file, index.php, contains JavaScript code within the head section. Here is the snippet of JavaScript: <script src="http://code.jquery.com/jquery-latest.min.js" type= ...

Tips on creating a post that can be viewed exclusively by one or two specific countries

I'm stumped on how to create a post that is visible only to specific countries. How can I code it to determine the user's country without requiring them to make an account? Any advice or hints would be greatly appreciated. ...

Tips for updating views with asynchronous events in an Angular service or factory

My service is designed to receive asynchronous events, such as those from socket.io. I'm looking for a way to update the views each time a new event is triggered. Since the view isn't directly connected to the service, I'm having trouble upd ...

Utilizing "Content" for Responsive Image Design in Chrome Version 33.0.1750.117

I previously implemented a method for responsive images on my website, which was working fine until the latest Chrome update. Surprisingly, it still functions properly on other browsers. //< ![CDATA[ var queries = [ ...

const queryString = 'search=' + searchId; - using jQuery

I have recently started learning about jQuery and I am currently studying a piece of code in order to implement a similar concept in my coursework. $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataStr ...

Encountering issue with express 4.x bodyparser functionality

I recently updated my body-parser to the latest version (1.17.1) and made sure to organize my code as advised by others. import express import body-parser app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended : fa ...

Are there any available npm modules for accurately tallying the total word count within a document saved in the .doc or .doc

I Need to tally the number of words in doc/docx files stored on a server using express.js. Can anyone recommend a good package for this task? ...

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

Extracting information from JSON fixture within simulated Angular service

I recently developed a mock Angular service specifically for testing a controller. However, whenever I run my tests, an error pops up saying: Unexpected request: GET ./fixtures/stats.json. This is how the code looks like in mock.players.service.js: &apos ...

How to import a dynamic typescript file in Next JS

As per the NextJs documentation, dynamic import can be used for JavaScript files like const DynamicComponent = dynamic(() => import('../components/hello')). Is it also advisable to use dynamic imports for .tsx files in a similar manner? ...

Updating the state of an object within a mapping function

I've been struggling with this issue for two days now. Despite my efforts to find a solution online, I am still stuck and starting to believe that I might be missing something. The main functionality of the app is to click a button and watch an apple ...

Is it possible to establish the page state upon loading (in the context of a GET request

At present, my navigation bar is set up to utilize AJAX for loading new pages and window.pushState() in order to update the URL when the AJAX call is successful. I've come to realize that it's crucial to push the page state during GET requests s ...