Manipulating JSON objects with AngularJS: Add or edit data as needed

I am working with a JSON array containing objects, each with various key-value pairs. I am using ng-repeat to display these objects on my HTML page. When I click edit for a specific object, a modal from Bootstrap toggles. Any changes made in the modal window should directly affect the JSON object and update the UI instantly. To achieve this, I am using angular.copy to duplicate the object and display it in the modal window. My goal is to replace the original object in the JSON array with the duplicated one by clicking an update button within the modal dialog. How can I accomplish this? Here is a sample of my code:

   $scope.array = [{"ItemId":"20113",
                   "ItemModel":"C2",
                   "ItemName":"Nokia", .....},
                   {....}, 
                   {....},
                   {....}, ......]

I need to splice index 2 in the array and insert a new object at the same index.

javascriptjsonangularjs

Answer №1

What is the reason for utilizing angular.copy?

If you passed the object you wish to modify, there would be no need to refresh it later. (apologies, I misunderstood and thought you required an update button)

To address your query, the solution is to substitute the existing object with the new one :

$scope.array[index] = modifiedObject;

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

Access information from an object within an array using REACT NATIVE

I've encountered a challenge while trying to extract data from a weather API. I am able to access the information that is not stored in an array as it is just an object. However, I'm facing difficulties with retrieving data from the WEATHER array ...

javascriptarraysapireact-nativeobject

Problem with displaying requests at the endpoint on the Express Router

I'm currently delving into the world of express and experimenting with express.Router() to route to various endpoints. Despite following online tutorials diligently, I am only able to successfully send text from the root '/' endpoint and not ...

javascriptexpressroutes

Issue with variable creation within ng-repeat

After reading a question on StackOverflow about determining the number of filtered out elements, I wrote the following code in Angular: <input type="text" ng-model="query" placeholder="Enter query..."> <div ng-if="filteredData.length!=data.length ...

javascripthtmlangularjsangularjs-ng-repeat

The functionality of the handleTextShow function in components>DrinkList.js is not working as expected after integrating an API

While working on my react program, I created a DrinkList.js file to display images of drinks. However, when I attempted to make the images clickable by adding an Onclick function to display their names in the console, errors started flooding in. import Rea ...

javascriptreactjs

Eliminate the disappearance of checkmark and error icons in Dropzone

This is my current setup: var dropzone = new Dropzone("#dropzone", { url: "<?php echo site_url($this->data['controller']."/Upload")?>", params: { 'transaction_id': "<?php echo $upload_transaction_id; ?>", ...

javascriptjquerydropzone

The Jodit editor is appearing incorrectly

Encountering an issue with the jodit wysiwyg editor or any similar plugin editor while working within a Bootstrap tab. When adding an editor to the tab content, the display is incorrect upon selecting the tab (displayed at a fraction of the height and miss ...

javascriptcssbootstrap-4jodit

How can dynamic x and y values be used to create moving waves on Canvas in HTML5?

My dynamic array values consist of x and y... Incorporating these x and y values, I want to create varying sine, triangular, square, and sawtooth waves on an HTML5 canvas... ...

javascriptjqueryhtmlcanvashtml5-canvas

Unable to retrieve information from Mat Select option

I'm encountering an issue with my code where I can see the options but cannot retrieve the value when selecting one. It just displays blank. The problem seems to be related to viewing only the status options. Does anyone have a solution to fix this? ...

javascriptangulartypescriptmat-selectmat-option

Utilize JSON text importing for template literals in Node.js

When it comes to my node js projects, I usually opt for using a text.json file and requiring it rather than hardcoding static text directly into my code. Here's an example: JSON file { "greet": "Hello world" } var text = require('./text.json ...

javascriptnode.js

What is the best way to adjust the value within a span element using plus and minus buttons located near an input field?

Is there a way to implement input addition using + and - buttons, even though it has been working without buttons so far? How can I achieve this functionality with the help of javascript or jquery? // To calculate the sum of three input values in a spa ...

javascripthtmljquery

An unusual error occurred: it seems that string indices are required to be integers

I encountered a peculiar issue while trying to parse this json data: { "status":"UP", "diskSpace": { "status":"UP", "total":10434699264, "free":8502456320, "threshold":10485760 } } Below is the code snippet I a ...

pythonjson

What is the best way to select specific points from a THREE.Points object?

I am working on a single THREE.Points() representing a point cloud and I am trying to select individual points using mouse clicks. starsGeometry = new THREE.Geometry(); for ( var i = 0; i < 10000; i ++ ) { var star = new THREE.Vector3( ...

javascriptthree.jspoint-clouds

Enhancing visual appearance with customized look control through the use of setAttribute

I have developed a unique custom look-controls feature and I am trying to integrate it into the scene using 'setAttribute(componentName, data)', but I'm unsure about what parameters to include. Any suggestions? Here is my approach: const s ...

javascriptthree.jsaframevirtual-realitywebvr

Combining JSON arrays with varying key indices in Typescript

Consider two JSON arrays: A: [ {"id": 123, "name": "AnyName1", "type": "AnyType"}, {"id": 231, "name": "AnyName2", "type": "AnyType"} ] B: [ {"id": 569, "thing": "AnyThing3"}, {"id": 891, "thing": "AnyThing4"} ] The goal is to merge these two arrays re ...

jsontypescript

Choosing elements in HTML using jQuery from an Ajax GET response

As a programming student, I am currently working on developing a basic website using HTML, JavaScript, and jQuery for the front-end, while utilizing node.js and Express frameworks for the back-end. In my project, I have used Ajax to retrieve data and then ...

javascriptjqueryhtmlajaxexpress

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 ...

javascriptjqueryhtmlcss

encountering a problem with npm while trying to execute the project

Encountering a persistent issue when attempting to run my project with npm start, even after downgrading my node version. Despite trying various solutions found on platforms like stackoverflow and stackexchange, such as deleting the node_modules folder, ru ...

javascriptnode.jsreactjsnpmnode-modules

Issue encountered while attempting to perform drag and drop functionality in Selenium WebDriver test using JavaScript

I've attempted to create a drag and drop simulation for Selenium WebDriver test using the following JavaScript code, but I keep encountering a WebDriver error. I opted for this approach because the Actions class didn't work on any browser (Firefo ...

javascriptselenium-webdriverdrag-and-drop

Exploring the possibilities of implementing the .map() function on a JSONArray within a ReactJS project using ES

When I receive a JSONArray from the server, my goal is to use .map() on it in order to extract key-value pairs of each object within the array. However, when I try to implement this code, I encounter an error stating "files.map is not a function". Can some ...

javascriptjsonreactjsecmascript-6

JavaScript - If you change the properties of an object within an array, does it automatically set the array as needing an update?

If we were to imagine a scenario where there is an array containing 3 objects, and then I decide to access the second object by its index in order to modify one or more of its properties, what would happen? Would this modification mark the entire array a ...

javascript