Troubleshooting Issues with AngularJS HTTP.get Requests

I'm currently working on a simple AngularJS application that is supposed to extract data from a .json file. While my code doesn't show any errors upon running it, it fails to retrieve the JSON values as expected. I have a feeling that I may be overlooking something basic and trivial, but I can't seem to pinpoint the issue. The {{1+2}} function within the controller was just a test to ensure that the application is functioning correctly without any errors.

index.html

<!doctype html>
<html ng-app='phonebook'>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="js/phonebook.js"></script>
</head>

<body>
    <div ng-controller="getPhonebook">
        <ul>
            <li ng-repeat="contact in phonebook.entries">
                {{contact.name}} {{1+2}}
            </li>
        </ul>   
    </div>
</body>
</html>

js/phonebook.js

(function() {
    var app = angular.module('phonebook', [ ]);



    app.controller("getPhonebook", function($scope, $http) {
      $http.get('js/phonebook.json').
        success(function(data, status, headers, config) {
          $scope.phonebook = data;
        }).
        error(function(data, status, headers, config) {
          alert('error');
        });
    });

})();

js/phonebook.json

{
    "entries" : [
        {
        "Name" : "Entry One",
        "Department" : "Department A",
        "Number" : [
            {
                "Name" : "Front Line",
                "Phone" : "1234567890",
                "Tieline" : "84543982"
            },
            {
                "Name" : "Back Line",
                "Phone" : "1243568790",
                "Tieline" : "58472989"
            }
        ],
        "Hours" :
            {
                "Sunday" : false, 
                "Monday" : "9AM – 6PM", 
                "Tuesday" : "9AM – 6PM", 
                "Wednesday" : "9AM – 6PM", 
                "Thursday" : "9AM – 6PM", 
                "Friday" : "9AM – 6PM", 
                "Saturday" : "9AM – 6PM"
            },
        "Description" : "…"
    }
    ]
}

Answer №1

For a demonstration, you can check out this link: http://plnkr.co/edit/MLTlizDbck1tzciWltOd?p=preview

In your HTML code, make sure to use {{contact.Name}} instead of {{contact.name}}

This is how your HTML should look like:

<body ng-controller="getPhonebook">

    <div ng-repeat="contact in phonebook.entries">
      {{contact.Name}}
       <ul><li ng-repeat="number in contact.Number">{{number.Name}} | {{number.Phone}}</li></ul>
    </div>


</body>

Also, remember to include the following JavaScript code:

var app = angular.module('app', []);

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

   $http.get('phonebook.json').
        success(function(data, status, headers, config) {
          $scope.phonebook = data;
        }).
        error(function(data, status, headers, config) {
          alert('error');
        });

});

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

Attempting to display my ejs template from a node server following the activation of a delete button, all without utilizing ajax

I have created a basic blog application using node.js for the backend and ejs for the frontend. Posting blogs using a web form works well by calling a post route. Now, I am facing an issue with implementing a delete button for each blog post. The current s ...

npm ERROR: Unable to install the package named "<packageName>" because it conflicts with an existing package of the same name

Currently, I am attempting to incorporate the jsonfile package into my project. However, I am encountering a couple of errors: An issue arises when attempting to install a package with the same name as another package within the same directory. (Despite ...

How to modify a .json file by inserting new lines at specific locations within the file?

I'm currently attempting to modify a ".json" file using code or scripts in order to integrate it into an installer. The task involves inserting a few lines into a .json config file, however, I haven't come across any code snippets or online guid ...

Is there a way to verify file types using Vuelidate?

Is there a way to validate file types like png, jpg, and jpeg using Vue.js's Vuelidate library? ...

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...

`Python automation for seamless HTTP browsing and HTML document generation`

My weekly routine at work involves printing out Account analysis and Account Positions for more than 50 accounts every Monday. I have to navigate through the page, select "account analysis", input the account name, format the page for printing, print the o ...

"Implementing conditional evaluation for pixel units in AngularJS using ng-style

Looking to adjust the style of an element based on its height. For example, if the height is less than X, apply 'style 1'; otherwise, apply 'style 2'. The syntax appears to be correct, but accurately evaluating the height property in p ...

The jQuery form submission functionality fails to execute properly in the presence of a callback function

I have been on the hunt for a solution to this problem, but unfortunately I haven't been able to find one. The issue at hand is that when using the jQuery Submit function with a button and a callback function defined, it doesn't seem to work. Her ...

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

Activate the radio button upon page load in angularjs

<div class="form-group" style="margin-top: 20px;" ng-repeat="row in skuDetails"> <label class="checkbox-inline"> <input type="radio" name="amount_{{$index}}" value="amount" ng-model="row.amount" ng-checked="row.reductionAmount != &apos ...

The generated hook in vuejs is throwing an error stating that window/localstorage is not defined

My goal is to save an authenticated user to local storage and then load them into Vuex on the next page load. created () { let user = window.localStorage.getItem('user') if(user) { this.setUser(JSON.parse(user)) } } I initia ...

Ways to activate a stylish pop-up box using an input field (when focus is removed)

While attempting to activate Fancybox upon the user shifting focus away from an input field containing a value greater than 25, everything seems to be in order with the focus out and value checking code. Nevertheless, when Fancybox is triggered, the follow ...

Arranging arrays within a JSON object in a new order

var data = { chart : 'rank', labels: [ { 0: 'First Option' 1: 'Second Option', 2: 'Third Option', 3: 'Fourth Option', 4: 'Fifth Option' } ], ro ...

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

I have encountered a persistent error message while working on a new component for my project. Despite double-checking the injection code and ensuring that the module and component export logic are correct, I am unable to pinpoint the issue. custom-header ...

Execute AngularJS $q.all, regardless of any errors that may occur

Is there a way to ensure $q.all is triggered even if the promises return errors? I'm working on a project where I need to make multiple $http.post requests, sending user-inputted values from text fields. The backend (Django REST framework) has a valu ...

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Can someone identify the error in my HTML code? I keep getting an "Uncaught TypeError: Cannot read property 'getElementsByClassName' of null" error on the second line of the script tag. Additionally, my implemented active header code is not funct ...

Exploring JSON Parsing in Android Development

After generating a JSON-formatted string, it resembles: private String jString = "{\"CategoryId\":1},{\"CategoryId\":2}"; This string is then converted into a JSON object: JSONObject jObject = new JSONObject(jString); When trying to ...

Utilizing Moment.js: Transforming 12-hour format to a Date object

Is there a way to convert a 12-hour string into a 24-hour Date object? day.from = day.from || moment("6:00", ["h:mm"]).format("HH:mm"); Unfortunately, I am encountering the following error: angular.js:11706 Error: [ngModel:datefmt] Expected `6:00` to be ...

Tips for extracting an XML value from an API

I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...