In AngularJS, encountering difficulties when trying to append an object to the end of the scope due to persistent data updates

Whenever a user submits a form, the fields are stored in a variable called $scope.params. In order to keep track of all submitted data, I am attempting to save them in an object named $scope.history. My current approach involves using the following code:

$scope.history.push($scope.params)

Unfortunately, this method is not working as expected. When I check the console output, it only displays the most recent values submitted by the form. For example, if I submit the form three times and change the "keywords" each time, the result looks like this:

{
    { keywords: 'Test 3' },
    { keywords: 'Test 3' },
    { keywords: 'Test 3' }
}

However, I was anticipating something more like this:

{
    { keywords: 'Test 1' },
    { keywords: 'Test 2' },
    { keywords: 'Test 3' }
}

How can I achieve the desired outcome?

Answer №1

By inserting a reference of $scope.params into the array, each element points to the same object. To avoid this, you should create a copy of it every time...

$scope.history.push(angular.copy($scope.params));

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

No content appears on the multi-form component in React

After several attempts at building a multi-step form in React, I initially created a convoluted version using React.Component with numerous condition tests to determine which form to display. Unsatisfied with this approach, I decided to refactor the code f ...

What is the syntax for sending a DELETE request in MongoJS?

I've been working on a simple contact list app and encountered an issue with deleting a record. When I press the delete button, it stops the server but upon restarting it, the record is successfully deleted (the correct list is displayed). The GET an ...

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

My code is incomplete and not functioning as expected. $.get("museums.php",function(data,status){ var response=''; //console.log(data); var json = $.parseJSON(data); museums = json.museums; for(let m in museums) { $("#na ...

Retrieving Data from Vue JS Store

I am fetching value from the store import {store} from '../../store/store' Here is the Variable:- let Data = { textType: '', textData: null }; Upon using console.log(store.state.testData) We see the following result in the cons ...

Client event triggered twice by server

Hey there! I'm currently working on creating a simple chat app using socket.io and express. One issue I'm facing is that when a user sends a message, the server broadcasts it to the rest of the clients, but it seems to be happening twice. I can& ...

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

I am implementing a Jquery pop up in my code: <script type="text/javascript"> function showAccessDialog() { var modal_dialog = $("#modal_dialog"); modal_dialog.dialog ( { title: "Access Lev ...

The findOne() function is providing the complete model instead of a specific document as expected

When using findOne() to extract a document, the correct result is printed when the returned value is logged. However, when looping over it, the model is printed instead of the original document stored in the City table: { _id: 62e135519567726de42421c2, co ...

Django fails to send back an ajax response when using the dataType parameter set to "JSON"

My goal is to send JSON to the server and receive a CSV in return. Below is the Ajax code I am using: var data = {"data":1} $.ajax({ type: "POST", url: "api/export_csv", data:JSON.stringify(data), // dataType: "JSON", // i ...

Performing a deep insert in SAPUI5 with the Kapsel Offline App on an OData V2 Model

Query: What is the process for performing a "Deep Insert" from a SAPUI5 Client application on an OData V2 Model? Situation: In my SAPUI5 Client application, I need to Deep Insert an "Operation" along with some "Components" into my OData V2 Model. // h ...

Transitioning between modals using Tabler/Bootstrap components in a ReactJS environment

Currently, I am constructing a Tabler dashboard and incorporating some ReactJS components into it. Initially, I used traditional HTML pages along with Jinja2 templates. However, I have now started integrating ReactJS for certain components. I prefer not t ...

Using Vue and PHP to parse a JSON string and display it as a table

I am currently facing a challenge in parsing a JSON string from my Laravel application to my Vue view. The format of the JSON string could be as follows: { "1":[ { "row":"Some text here on first column." }, { "row":"And more text. Second row ...

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

Currently, I am developing a react application However, when running this function using infinite scroll, an error is encountered An Unhandled Rejection (TypeError) occurs: Unable to access the "country" property, since this.props is undefined async pa ...

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

I am trying to create a unique animation where three lines of text appear in succession, then hide, and then reappear in succession. I have successfully split the lines into span tags to make them appear one after the other. However, I am struggling to fin ...

What to do with non utf-8 strings in json_encode()?

I have an array of strings, all using the default system ANSI encoding and originating from a SQL database. Since there are 256 potential character byte values (single-byte encoding), I'm wondering if there is a way for json_encode() to display these ...

Updating dropdown selection with JavaScript

I have a dropdown select menu with two options. I am using JavaScript to retrieve the selected value from the drop-down menu and display it in a text area. Here is my code: $(document).ready(function () { $('#pdSev').change(function () { ...

What impact does querying performance in Elasticsearch have when working with multiple fields compared to just one field?

Currently, I am tackling a project that requires me to search for various patterns in Remedy log files. I'm debating whether it would be beneficial to have Logstash separate the message field into multiple fields within a JSON document, or if I should ...

React UseEffect does not trigger update upon deletion of data from array

I've hit a roadblock and need some assistance. I'm working on a MERN stack application that interacts with the Github API. Users can search for Github users, save them to their profile on the app, and automatically start following them on Github. ...

Dealing with repeated parameters in a URLHow can you handle duplicate

My Ajax select input dynamically changes the URL without refreshing the page. However, I have encountered an issue where repeated parameters stack in the URL when the select input is changed multiple times: [domain]/find.php?cat=1#pricemin=10&pricem ...

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

Looking to manipulate and update information within a JSON file using AngularJS

Exploring the world of AngularJS, I've tried searching online but haven't found much helpful information yet. This is the content of my retails.json file: { "categories": [ { "dept_id": "123", "category_na ...