Unable to retrieve information from JSON file utilizing AngularJS version 1.6

I'm having trouble retrieving data from my JSON file using AngularJs 1.6

  myApp.controller("homeCtrl", function($scope, $http) {
      $scope.Data = [];
      var getJsonData = function() {
          $http.get('contactlist.json').then(function(response) {
              $scope.Data = response.data;
              console.log(response.data);
          });
      }
      getJsonData();
  });

The issue I'm encountering is that the code doesn't seem to be reaching the response part and my page loads without stopping at the debug response. It seems stuck on `then(function(reponse){`

This is how my JSON File looks like:

var contactList = [
{
"firstName": "Joe",
"lastName": "Perry",
"contactNumber": "444-888-1223",
"contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce6e3e9ccefe3fee8e5ffa2f9ff">[email protected]</a>"
},
{
"firstName": "Kate",
"lastName": "Will",
"contactNumber": "244-838-1213",
"contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325953465772515d40565b411c4741">[email protected]</a>"
}
];

Answer №1

Situation resolved successfully. The issue stemmed from a semicolon at the conclusion of the JSON file data. This error surfaced upon attempting to paste it into the Plunker editor. Mea culpa.

Answer №2

Modify your JSON file (as it is currently invalid):

[{"firstName":"Joe","lastName":"Perry","contactNumber":"444-888-1223","contactEmail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5dfdad0f5d6dac7d1dcc69bc0c6">[email protected]</a>"},{"firstName":"Kate","lastName":"Will","contactNumber":"244-838-1213","contactEmail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e289839687a2818d9099886fc797d08d091de">[email protected]</a>"}]

Answer №3

Do not include var contactList = in your JSON file; only place the JSON contents itself.

For example:

[
   {
        "firstName": "Joe",
        "lastName": "Perry",
        "contactNumber": "444-888-1223",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f8fdf7d2f1fde0f6fbe1bce7e1">[email protected]</a>"
    },
    {
        "firstName": "Kate",
        "lastName": "Will",
        "contactNumber": "244-838-1213",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f74 7e6b7a5f7c706d7b766c316a6c">[email protected]</a>"
    }
]

var contactList = <something>
implies that it's JavaScript code meant to be executed. However, if you are reading the file and parsing it as JSON data rather than executing it as a js file, ensure that the contents are structured as a JSON string and not JavaScript code.

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

What steps should I take to make the initiallyHidden attribute in FusionCharts work properly?

I am encountering an issue with my chart that is reloaded periodically. I want to make sure that the series hidden by the user (by clicking on their legend names) remain hidden even after reloading. I attempted to set the series initiallyHidden attribute t ...

Exporting modules for import such as Grid and Grid.Item

Is there a way to utilize two components in the following format: <Container> <Container.Item>X</Container.Item> <Container.Item>Y</Container.Item> </Container> Can you provide instructions on how to export these c ...

Uploading profile images with AngularJS and Firebase

I am encountering an issue with my JavaScript image uploader. It successfully uploads an image and provides the image src, but I need to save this value in my FireBase DB for the current user that is being created. Initially, I attempted to output the img ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Lazy loading AngularJS UI router named views is an efficient way to improve performance

AngularJS UI router named views loading based on user access rather than loading at the time of state route access. Example: $stateProvider .state("login", { url: "/login", templateUrl: getTemplateUrl("login/Index") }) ...

Issue with Importing AdapterDateFnsV3 in MUI?

I have the listed npm packages installed: "@mui/icons-material": "^5.15.19", "@mui/lab": "^5.0.0-alpha.170", "@mui/material": "^5.15.19", "@mui/system": "^5.15.15", "@mui/ ...

Ionic transmits data when navigating to a new page

My dilemma is this: I need to transfer data from my home.html page to the map.html page. To accomplish this, I am attempting to pass the data directly from the HomeController to the MapController. However, I wish to avoid utilizing a Service. I am in sea ...

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

How to fetch data from DynamoDB using AngularJS

I've been working on retrieving a value from DynamoDB and then assigning that value to ng-model in order to display it. However, I keep running into the issue of the data always being null. DynamoDB table "meta_value": { "clause_note": "Note: go ...

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

Generate Random Quotes - Each new quote should be different from the previous one

As I tackle the FreeCodeCamp 'Random Quote Machine' front end library project using React JSX, everything seemed to be running smoothly except for one major issue - the same quote was often generated two or three times in a row. Obviously, this i ...

AngularJs, Sending multiple requests simultaneously

Here is some code I am working with: Angular Code: $http.get('admin/a').success(function(){ console.log("A finish"); }); $http.get('admin/b').success(function(){ console.log("B finish"); }); PHP Code: Route::group(ar ...

Is it possible for the scroll event to be triggered while scrolling only when a div element is used?

While utilizing window.onscroll to track scroll events during scrolling, I noticed that in certain Android devices the scroll event is only triggered after the scroll has completed. However, when monitoring scroll events within a specific div element, it ...

Keystroke to activate Ant Design Select and start searching

I'm currently using the 'react-hotkeys-hook' library and have successfully implemented a hotkey that logs in the console when triggered (via onFocus()). My goal now is to use a hotkey that will open a Select component and add the cursor to i ...

"Unexpected behavior: PHP+JS getElementById() function is returning an integer value instead of a

EDIT: Apologies for the PHP section not displaying correctly. I am attempting to extract a decimal value from PHP/HTML in JavaScript using getElementByID().value. However, despite the PHP value being decimal, it is represented as an integer in JavaScript ...

Runs tasks asynchronously in a sequential manner

I am attempting to run two functions asynchronously in series using node.JS, but I am struggling with the implementation. Currently, my code looks like this: Function 1: function search(client_id, callback) { clientRedis.keys('director:*', ...

Increase the time of a Date by 10 seconds

Is there a way to increase the time of a JavaScript date object by 10 seconds? For example: var currentTime = new Date(); var currentSeconds = currentTime.getSeconds() + 10; currentTime.setSeconds(currentTime.getSeconds() + currentSeconds); ...

Steps for resolving the issue of "AttributeError: 'NoneType' object has no attribute 'to_json'":

I encountered an error "AttributeError: 'NoneType' object has no attribute 'to_json'" while attempting to create a function in Jupyter notebook that would output data in a JSON file. Here is the code I used: import json def generate_jso ...

Object displaying no visible illumination

Recently, I've been experimenting with this project, and after some trial and error, I've managed to get things working to some extent. As a novice in JavaScript, I'm unsure if the issue I'm facing has a simple solution. The problem is ...

How are the actions in react redux able to utilize dispatch and getState methods?

Could you please explain how the actions.js in the reddit example of the react redux docs is able to access the dispatch and getState functions without importing them explicitly? I was under the assumption that every method needed to be imported in each ...