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

Is there a way to create a list of languages spoken using Angular?

I am in search of a solution to create a <select> that contains all the language names from around the world. The challenge is, I need this list to be available in multiple languages as well. Currently, I am working with Angular 8 and ngx-translate, ...

Encountering an issue with React npm causing errors that I am unable to resolve

Hey there, I'm a newbie to React. After setting everything up, I encountered an error after running "npm start." Can anyone help me figure out how to fix this? Thanks in advance! Click here for image description ...

Tips for effectively passing "this" to direct the event initiator in react js?

I'm facing an issue where I am attempting to send a buttons object to a function and then access its properties within that function. Here's my button : <RaisedButton label="Primary" id = "1" onTouchTap={()=>this.buttonPress(this)} prima ...

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

Is it possible for me to display dynamic content and utilize a template engine like (ejs)?

Currently, I am in the process of developing a weather application to enhance my skills with express and ejs. At the moment, I'm utilizing app.get to fetch data from darkSky's API successfully, and I can display it on my index.ejs page. My next ...

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

Navigating intricate JSON information using AngularJS

I am working on displaying JSON data in an HTML form using ng-repeat. I have managed to retrieve data from some objects, but I am facing challenges due to the nested structure of objects like "Obj => Obj => Obj". In the JSON object provided below, I have ...

How can we transfer functions between files in JavaScript when creating a service library?

There's a piece of code located in my identity service that I'm working with. export function sumbitLogin(username, password) { console.log(username, password); } I want to simplify the process of accessing services in my components without ...

Looking to transform a nested JSON structure into a visually appealing HTML table with merged rows?

My JSON structure appears as follows: $scope.data = [ { "type":"Internal", "count": 3, "library" : [ { "type":"Library 123", "count": 2, "version" ...

What is the reason for the lack of user data being saved in studio3t?

I'm struggling to identify the issue in my app development process. I'm creating an application that collects user email and password, storing them in a database. The problem lies in the fact that while user passwords are successfully stored, the ...

Leveraging the power of AngularJS controllers with jQuery's $.ajax functionality

Is there a way to utilize jQuery's $.ajax() function within an angularJS controller (instead of using angularJS built-in $http) in order to access $scope values from a view/template later? Below is an example of a somewhat minimalistic angularJS cont ...

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

Using ng-repeat in AngularJS to stream data through a filter

I have the data but I want to retrieve the amount in EUR instead of USD. Is there a way to do this? [{"currency":"USD","amount":3260}, {"currency":"EUR","amount":"320.00"}] This is my current code: <div class="col-xs-6"> <h5 ng-rep ...

retrieve a static method that returns an asynchronous value

Is there a way to have a static ES6 method in my code that simply returns a value instead of a promise? I'm looking for a solution to this problem: export default class Member { static existingMember() { var _existingMember; // DB.findExist ...

Using Laravel 8 to create connected dropdown menus with the power of Ajax

Struggling with setting up a dependent dropdown menu in Laravel 8 using Ajax. The first dropdown works fine, but the next two don't display any options. Being new to Laravel, I'm having trouble pinpointing the problem areas. Seeking assistance to ...

Directing a controller assignment in AngularJS 1.2 via a directive

Transitioning from angularJS 1.0 to 1.2 has presented a challenge for me when it comes to assigning a controller to a directive with a distinct scope, without explicitly defining the controller in my HTML using ng-controller. Let's look at this scena ...

"When working with Vue projects, an error may occur stating "Parsing error: No babel config file detected" if the IDE is not opened at

Encountered an issue in VS Code with a Vue project, where if the project is not opened at the root directory, babel.config.js fails to load causing confusion for the IDE. All my files display an error on the initial character of any javascript/vue file st ...

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

I have a collection of .svgs that I exported from Sketch (refer to the sample below). These icons are registered in the MatIconRegistry and displayed using the mat-icon component. However, I've observed issues with icons that utilize masks in Sketch ...

Side-by-side arrangement of AngularJS Accordion in a vertical layout

I am looking to change the layout of the accordions from being stacked on top of each other to being displayed side by side. I have attempted to add a span above the accordion-group but it did not provide the desired effect. <div id="top-panel" style=" ...

How to toggle the visibility of a menu using uibootstrap and angularjs?

First Second Objective: My goal is to achieve a functionality similar to the screenshots above. For instance, when I click on the "Search with a list of items" link, the div should expand like in the Second screenshot and collapse when clicking on the sa ...