AngularJS: updating a module

I recently started learning AngularJS and I need some guidance on how to refresh the data in a table within a module (specifically, a list of names and post codes).

Below is the script where I am trying to reload the JSON file upon clicking a button:

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
   $http.get("jsondisplay4.php")
   .then(function (response) {$scope.names = response.data;});

});


</script>

Here is the corresponding HTML:

<div ng-app="myApp" ng-controller="customersCtrl">
 <button ng-click="doRefresh()">Refresh</button>
<table>
<tr>
   <td>Ref</td>
   <td>Company</td>
   <td>&nbsp;</td>
</tr>   


  <tr ng-repeat="x in names">
    <td>{{ x.Ref }}</td>
    <td>{{ x.CompanyName }}</td>
    <td>
      <input type="text" name="textfield" id="textfield" ng-model="x.PostCode"></td>
  </tr>
</table>

</div>

I'm currently considering naming the function "doRefresh()", but I'm unsure about the correct placement of the code and its implementation.

Your assistance would be highly appreciated.

Answer №1

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

   function initiate(){
    $http.get("jsondisplay4.php")
      .then(function (response) {
        $scope.names = response.data;
      });
   } 

  $scope.updateData = function(){
    initiate();
   }

   initiate();
});

Upon loading the controller, the initiate function is called. The $scope.updateData function serves the same purpose.

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

Retrieve all documents from a Firebase User's collection

Recently, I created a Firebase cloud function where my goal is to access every user's internal collection named 'numbers' and examine each document within that collection for some comparisons. Do you have any insights on how I can achieve t ...

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item     item • item • item • item item • ...

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

When using a React Router path variable along with other paths, React may have difficulty distinguishing between them

Setting up react router in my project to differentiate between user username variables and other paths is proving challenging. For instance: baseUrl/admin baseUrl/daniel Currently, React is unable to distinguish between the two. My intention is to query ...

Is there a way to position my character at the exact center of my mouse click coordinates instead of the top left corner?

In my game, players can click on a 2D HTML5 canvas to set a point for their character to move to. However, I've noticed that when I click, the character appears in the lower right corner of where my mouse is clicked. After some research, I realized th ...

Ways to automatically close browser tab upon successful submission of a form

I have an old file that has been updated. One of the requirements for this file/project modification is to have the current browser window close when the user clicks OK to submit the form. I am curious if this can be done using plain/vanilla JavaScript? ...

Error: Unable to access the 'classList' property of null in HTMLSpanElement.expand function

Encountering a minor issue with my javascript code. Following a tutorial for a seemingly simple task: link What I did: Adapted the HTML from the tutorial to fit my desired visual outcome while maintaining correct class and id attributes. Utilized identic ...

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

Receiving an error stating that .startsWith() is not a function in react native

I'm having trouble searching for items using a search bar. The original items are in 'prod', but I keep encountering errors such as 'startsWith() is not a function' and sometimes '.toLowerCase() is not a function'. const ...

Angular's ng-class directive functions correctly with an input element of type "text", but it does not

Just started learning angular and I've hit a roadblock. This is the input for my form: <div class="form-group" ng-class="{'not-empty': mailingzip.value}"> <input type="number" name="mailingzip" ng-minlength="5" ng-maxlen ...

Steps for dynamically executing an Angular ng-include directive in real-time

Is there a way to dynamically insert an ng-include element into an HTML page and have it function properly? I am working on a Drag N Drop application where users can drag an element onto the page, and upon dropping it in the designated zone, the original ...

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

The following MongoDB errors unexpectedly popped up: MongoNetworkError: connect ETIMEDOUT and MongoServerSelectionError: connect ETIMEDOUT

I've been working on a React and NextJS App for about a month now, utilizing MongoDB as my database through MongoDB Atlas. I'm currently using the free version of MongoDB Atlas. For the backend, I rely on NextJS's api folder. Everything wa ...

Leveraging promises to make Ajax calls without repeating code

Would it be possible to create an ajax function without duplicating it? Passing different parameters, which are locations to various files. Then utilizing the promise to combine them into a single object, possibly incorporating the spread operator. Is th ...

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

Increase the size of the SVG area

I'm still learning how to work with SVGs, so I appreciate your patience as I ask what may seem like a simple question. Currently, I have an SVG image that resembles a cake shape. See it here: Take a look at the code: <svg version="1" id="Layer_1 ...

Tests are not visible to jasmine-node

Currently, I am utilizing jasmine-node and running it with the following command: node.exe path/to/jasmine_node --verbose path/to/my_file.js Despite successfully invoking Jasmine-node and receiving an error for incorrect paths, it appears that no tests a ...

What is the best way to ensure a function waits for a stable database connection before proceeding?

Perhaps not phrased well, but I grasp the concepts of async/promises/callbacks. My aim is to develop a module that can be imported (database.js), where I can then execute methods like database.insert() and database.read(). This is the code I have so far: ...

Check to see if it is possible to click an HTML div

Currently, I am engaged in Selenium and Robot Framework automated testing and in search of a method to automatically locate div tags that are capable of being clicked. The keyword Click Element works well when provided with a specific CSS selector, but ho ...

The javascript file jquery-ui-1.10.4.custom.js is encountering an issue with the error message 'this.source is not a function'

I am encountering an error while using 'jquery-ui-1.10.4.custom.js' for auto-complete. The error being thrown is 'TypeError: this.source is not a function' Here is the HTML code snippet: <input type="text" ng-model="srchfname" auto ...