Manipulating JSON Objects in AngularJS

While I may be proficient in utilizing existing data, my expertise in editing JSON objects is not quite up to par yet. Any assistance in this area would be greatly appreciated. This question may seem basic, but I am seeking clarification as I am unsure.

How can I update a value in a JSON string that resembles the structure below? It pertains to a kineticjs object that requires draggable elements to be disabled before the stage is regenerated.

I have attempted to create a fiddle based on some suggestions provided, but so far, I have not been successful. Here is the link to the fiddle: http://jsfiddle.net/8Y6zZ/5/

For instance, I aim to change "draggable": true, to "draggable": false, wherever it occurs... How can this be achieved using javascript (specifically within angularjs)?

{
    "attrs": {
        "width": 1276,
        "height": 660
    },
    "className": "Stage",
    "children": [
        {
            "attrs": {},
            "className": "Layer",
            "children": [
                {
                    "attrs": {
                        "x": 0,
                        "y": 0,
                        "draggable": false,
                        "name": "brochure-1.png"
                    },
                    "className": "Image"
                },
                {
                    "attrs": {
                        "x": 999,
                        "y": 288,
                        "draggable": true,
                        "name": "sample1.png",
                        "rotation": 0,
                        "scaleX": 1,
                        "scaleY": 1,
                        "offsetX": 0,
                        "offsetY": 0,
                        "skewX": 0,
                        "skewY": 0
                    },
                    "className": "Image"
                },
                {
                    "attrs": {
                        "x": 301,
                        "y": 115,
                        "draggable": true,
                        "name": "sample2.png",
                        "rotation": 0,
                        "scaleX": 1,
                        "scaleY": 1,
                        "offsetX": 0,
                        "offsetY": 0,
                        "skewX": 0,
                        "skewY": 0
                    },
                    "className": "Image"
                }
            ]
        }
    ]
}

In connection to this query, are there effective methods to reconstruct JSON objects from a "basic" JSON format? Essentially, if a backend developer provides poorly organized JSON data, is there a way to restructure the object for efficient use within angularjs?

Answer №1

If you're dealing with nested child objects in your JSON structure and need to disable draggability, you can implement a simple recursive function to iterate through all the children. Here's an example of how you could achieve this:

function disableDraggability(obj) {
  if(obj.attrs) {
    obj.attrs.draggable = false;
  }
  if(!obj.children) {
    return;
  }
  obj.children.forEach(function(child) {
    disableDraggability(child);
  });
}

Answer №2

To achieve this, utilize angular's forEach function. Simply point it towards the list of children within your object. Below is an example of how you can implement this with your own JSON object, replacing YOUR_OBJECT with the actual name of your object.

angular.forEach(YOUR_OBJECT.children.children, function(obj){
  obj.attrs.draggable = false;
});

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

Design a dropdown menu utilizing the keys of elements in an array

Looking to create a unique custom drop down functionality where the default value is an anchor title and a list of values is displayed when clicked. Here's the structure: <div class="sort-select"> <a href="" ng-click="showList =! showList;" ...

Trigger a warning pop-up if a selection has not been made in a dropdown menu using jQuery

I am attempting to display an alert popup when the user fails to select a value from the dropdown menu. Below is my HTML code: <div id="reminder" class="popup-layout"> ... ... </form> </div> In my JavaScript function page, I have tried ...

What is the best way to create a non-reactive value in Vue.js?

In my Vue.js app, I am facing an issue where an array value is becoming reactive even though I want it to remain un-reactive. The array should only be updated when a specific "refresh" action is completed. However, every time a new value is assigned to the ...

Click on the marker to adjust the map's central position

I've successfully created a leaflet map featuring an array of 3 different locations, each marked with a popup window. Now, I'm looking to implement the functionality that will allow the center of the map to change dynamically when a user clicks o ...

Discover the simple steps to include row numbers or serial numbers in an angular2 datagrid

Currently, I am utilizing angular2 -datatable. Unfortunately, I am facing an issue where the correct row numbers are not being displayed in their corresponding rows. Whenever a user moves to the next page using the paginator, the datatable starts countin ...

Ways to display a targeted div element in Ruby on Rails when a limit is imposed

I'm working on a Rails app and I have a specific goal in mind. I want to automatically display a static div element only when the conditions limit(4) are met, meaning 4 div elements are showing. Essentially, I want to show the "Apply for our Program" ...

Employing require.js, one can integrate a distinctive form of non-concatenated dat.gui source. This allows for the seamless

Excuse the SEO-friendly title, but I want to ensure that everyone can access the issue I'm currently working on. For those interested in customizing the appearance of dat.gui, you will need to download the source and include it using require.js follow ...

What is the most effective way to display a card with varying values depending on the user's input in a form?

For a while now, I've been grappling with a particular challenge. In my project, I am utilizing multiple states to display values within a card after they are entered into a form. The first state captures the values and modifies the initial state, whi ...

Angular elements that function as self-validating form controls

I'm wondering if there's a more efficient approach to achieve this, as I believe there should be. Essentially, I have a component that I want to function as an independent form control. This control will always come with specific validation requi ...

Guide on building a JSON hierarchy starting with a single parent node and several offspring nodes

My Java project involves creating a JSON object with a root node and child nodes. I have successfully implemented this, but now I need to add more children to the existing child nodes under the root node. Unfortunately, I am facing challenges in achieving ...

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation I stumbled upon this solution for converting a simple SVG with one path layer into Vue2 vnode list and wanted to adapt it for Vue3. After scouring resources, including the MDN docs, I couldn't find any pre-existing solutions. So, I dec ...

Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than t ...

Collaborate and apply coding principles across both Android and web platforms

Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...

Using Node.js to create a RESTful API that pulls information from MongoDB

I am currently working on creating a REST API using Node.js to retrieve the last N rows from a MongoDB collection. Here is my current code snippet: var express = require("express"); var app = express(); var bodyParser = require("body-pa ...

Using ES6 without the need for jQuery, populate a select element with JSON data using Javascript

I have a json-formatted dataset that I want to incorporate into my select options. Here is the data: { "timezones": { "country": "Africa", "tz": "Africa/Abidjan" }, { "country": "America", "tz": "America/ ...

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Within my RegisterTaster function, I need to execute another function called endRegisterAlert. Since I'm not using a constructor and instead treating the class as a const in React Native, how can I achieve this? What is the best way to call the endRe ...

Tips for successfully executing child_process.exec within an ajax request

On a server that I have access to but not ownership of, there is a node js / express application running on port 3000. Various scripts are typically executed manually from the terminal or via cron job. My goal is to have a button on the client-side that tr ...

What is the method to display a caret in regular HTML text with the use of JavaScript?

Currently, I am studying JavaScript and aiming to develop a typing game similar to typeracer.com. The goal of the game is to type accurately and quickly without errors. In this game, users input text into a box, and JavaScript then compares their inputs w ...

The issue with React Testing using Jest: The domain option is necessary

I've recently developed a React app that implements Auth0 for Authentication. Right now, I'm working on setting up a test suite using Jest to test a specific function within a component. The function I want to test is createProject() in a React ...

What could be causing the issue of not being able to access an element visible in AngularJS Videogular?

I am currently working on integrating the videogular-subtitle-plugin with the most recent version of Videogular/AngularJS. As a newcomer to AngularJS, I believe there must be a simple solution that I am overlooking. My main challenge lies within a directi ...