AngularJS: Refresh array following the addition of a new item

After saving an object, I am looking to update an array by replacing the conventional push method with a custom function. However, my attempts have not been successful so far. Are there any suggestions on how to rectify this issue?

app.controller("productController", function($scope, $http, createProductService, listProductsService){

    $scope.addProduct = function(){
        var newProduct = createProductService.createProduct($scope.product);
        //$scope.products.push(newProduct);     
        updateArray();
    };

    $scope.products = listProductsService.query();

    var updateArray = function(){
        $scope.products = listProductsService.query();
    }
}

app.factory("listProductsService", function($resource){
    return $resource("getAllProducts", {}, {
        listProducts: {
            method: "GET",
            isArray: true
        }
    })
})

Answer №1

To ensure updates are reflected, consider using $scope.$apply() in your code:

function updateData() {
   $scope.$apply(function () {
      $scope.data = fetchDataService.fetch();
   });    
}

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

How to capture mouse events using a personalized directive in Angular

One of my projects involves a custom directive named side-menu, which I include in my index.html like this: <side-menu></side-menu> This directive contains a controller that is located in a separate file (SidebarController.js). The template f ...

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

Simple yet perplexing JavaScript within an Angular directive

In the tutorial, the author explains that each element in the stars array contains an object with a 'filled' value, which is determined as true or false based on the scope.ratingValue received from the DOM. directive('fundooRating', fu ...

Prompt for confirmation in ASP.NET code-behind with conditions

I've searched around for a solution to this problem. Below is a representation of my pseudocode: bool hasData = ItemHasData(itemid); Confirm = "false"; // hidden variable if (hasData) { //Code to call confirm(message) returns "true" or "false" ...

Using AngularJS to calculate the right responses and show the overall score in a quiz

Can someone please provide guidance on how to iterate over questions in AngularJS for a quiz application and display the correct answers? I am new to programming and struggling with this. The quiz is structured in JSON format below: "questions": [{ ...

Encountering a jQuery error while attempting to initiate an AJAX request

I'm currently working on a project in SharePoint and I want to integrate JQuery to make an ajax call from the homepage. However, when I attempt to make the call, I encounter an error stating "Array.prototype.slice: 'this' is not a JavaScript ...

Implementing a Push System without using node.JS

I am looking to develop a notification system similar to Facebook's, where notifications appear on the bottom-left side of the screen when someone interacts with your posts, for example. However, my challenge is that I need the server to send real-ti ...

Using Typescript for AngularJS bindings with ng.IComponentController

Currently, I am utilizing webpack alongside Babel and Typescript Presently, the controller in question is as follows: // HelloWorldController.ts class HelloWorldController implements ng.IComponentController { constructor(private $scope: ng.IScope) { } ...

AngularJS allows for editing elements in an array, but not string objects directly

I am a beginner in AngularJS, currently in the learning phase. Query I want to edit a specific rma from the list. When I click on the edit button and call the controller function updateRma(rma), after selecting rma number 11, my absolute URL is "http://l ...

Exploring deep within JSON data using jQuery or Javascript

I have a substantial JSON file with nested data that I utilize to populate a treeview. My goal is to search through this treeview's data using text input and retrieve all matching nodes along with their parent nodes to maintain the structure of the tr ...

Transformation of an Ajax array into an associative array

Currently, I am working on creating an API using Ruby on Rails and facing a challenge with sending an array through ajax. The task seems straightforward, but the issue arises when the array is received as an associative array instead of a regular one! Es ...

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...

Angular page fails to refresh upon addition or deletion of data

There's a recurring issue with my angular application where the page fails to refresh after data manipulation such as addition, editing, or removal. For example, when I add a new item to a list of subjects, it doesn't show up unless I navigate aw ...

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...

Leveraging JavaScript to create a horizontal divider

Just a quick question - how can I create a horizontal line in Javascript that has the same customization options as the HTML <hr> tag? I need to be able to specify the color and thickness of the line. I am working on a website where I have to includ ...

Can you explain the variance in these code snippets when implementing React's setState() function?

Can you explain the variance between these two blocks of code? this.setState((state)=>({ posts: state.posts.filter(post=> post.id !==postRemoved.id) })) versus this.setState((state)=>{ posts: state.post ...

How to Display Prices in Euros Currency with Angular Filter

Can someone help me figure out how to display a price in euros without any fractions and with a dot every 3 digits? For example, I want the price 12350.30 to be shown as 12.350 €. I attempted to use the currency filter but it only worked for USD. Then ...

Having trouble with JavaScript's Date.getUTCMilliSeconds() function?

I have a straightforward question for you. Take a look at this Angular App and try to create a new date, then print the number of UTC milliseconds of that date in the console. Can you figure out why it is returning zero? ...

Traversing JSON data in a recursive manner without definite knowledge of its size or nesting levels

Currently, I'm working on a chrome app that utilizes local storage. The backend returns JSON data which I then save locally and encrypt all the items within the JSON. I have multiple sets of JSON with different encryption functions for each set. I at ...

Populate a JSON table in React with checkboxes and automatically mark them based on the JSON data

I'm currently working on creating a React table using JSON data like this: [ { "Id_side": 123, "Name_side": "R4", "Name_cycle": "C1" }, { "Id_side": 345, "Name_side": "M1", "Name_cycle": "C2" ...