How to update a boolean value in a JSON object using AngularJS?

Question

How to update a boolean value in a JSON object using AngularJS?

Trying to modify a boolean value when a user clicks on a JSON-populated table row. Here's an example of the setup...

$scope.prices = {
"Prices": [
    {
        "Code": "edl",
        "Selected": false
    },
    {
        "Code": "ead",
        "Selected": false
    }
]
}

This data is then connected to a table...

<table>
<tr ng-click="change(item.code)" ng-repeat="item in prices">
    <td>{{prices.Code}}</td> 
    </tr>
</table>

Once a user clicks a row, the change function is triggered to toggle the selected value between true and false.

$scope.change = function (itemCode) {
//update the clicked code selcted value to True/False
// check the current value and switch
// Apologies for the confusion!
if(!$scope.prices.code.selected){
    $scope.prices.code.selected = true
} else {
    $scope.prices.code.selected = false
}
};

Seeking guidance on how to make this work within the change function. Any other approaches would be appreciated! Thank you

javascript json angularjs

Answer 1

Answer №1

Initially, it is illogical to add an additional level in $scope.prices before reaching the actual array of prices.

In simpler terms, instead of:

$scope.prices = {
"Prices": [
    {
        "Code": "edl",
        "Selected": false
    },
    // etc.
]
};

You should directly have the array like this:

$scope.prices = [
    {
        "Code": "edl",
        "Selected": false
    },
    // etc
];

This way, you can easily bind to it:

<table>
    <tr ng-click="change(item)" ng-repeat="item in prices">
        <td>{{item.Code}}</td> 
    </tr>
</table>

Moreover, since $scope.change() now receives the entire item instead of just the code, you can directly toggle its Selected property:

$scope.change = function (item) {
    item.Selected = !item.Selected;
};

Answer 2

Initially, it is illogical to add an additional level in $scope.prices before reaching the actual array of prices.

In simpler terms, instead of:

$scope.prices = {
"Prices": [
    {
        "Code": "edl",
        "Selected": false
    },
    // etc.
]
};

You should directly have the array like this:

$scope.prices = [
    {
        "Code": "edl",
        "Selected": false
    },
    // etc
];

This way, you can easily bind to it:

<table>
    <tr ng-click="change(item)" ng-repeat="item in prices">
        <td>{{item.Code}}</td> 
    </tr>
</table>

Moreover, since $scope.change() now receives the entire item instead of just the code, you can directly toggle its Selected property:

$scope.change = function (item) {
    item.Selected = !item.Selected;
};

Answer 3

Answer №2

Before we proceed, there are a few key adjustments that need to be made.

Make sure to reference the array Prices within the $scope.prices object.

Modify the change() function to accept the reference to the clicked item.

<table>
  <tr ng-click="change(item)" ng-repeat="item in prices.Prices">
    <td>{{item.Code}}</td>
  </tr>
</table>

Next step is to implement the change function

$scope.change = function (item) {
  if (item.Selected) {
    item.Selected = false;
  } else {
    item.Selected = true;
  }
};

Answer 4

Before we proceed, there are a few key adjustments that need to be made.

Make sure to reference the array Prices within the $scope.prices object.

Modify the change() function to accept the reference to the clicked item.

<table>
  <tr ng-click="change(item)" ng-repeat="item in prices.Prices">
    <td>{{item.Code}}</td>
  </tr>
</table>

Next step is to implement the change function

$scope.change = function (item) {
  if (item.Selected) {
    item.Selected = false;
  } else {
    item.Selected = true;
  }
};

Answer 5

Answer №3

If you want a cleaner solution without relying on functions, here's an alternative approach that doesn't require removing functions from $scope to be mindful of memory usage.

<table>
    <tr ng-click="item.Selected = !item.Selected" ng-repeat="item in prices">
        <td>{{item.Code}}</td>
    </tr>
</table>

Have a fantastic day assisting others!

Answer 6

If you want a cleaner solution without relying on functions, here's an alternative approach that doesn't require removing functions from $scope to be mindful of memory usage.

<table>
    <tr ng-click="item.Selected = !item.Selected" ng-repeat="item in prices">
        <td>{{item.Code}}</td>
    </tr>
</table>

Have a fantastic day assisting others!

How to update a boolean value in a JSON object using AngularJS?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering issues while attempting to execute node-sass using npm

Is there a way to reverse the animation playback in Angular?

Display a particular element when hovered over

Enhancing the appearance of list options in Autocomplete Material UI by utilizing the renderOption feature

Changing the color of a selected list element using an Angular directive

Storing JSON array values as variables using the Linkedin PHP library

Updating and writing JSON values in Python3

My Javascript file is not being recognized by MVC

Issue with converting string to Date object using Safari browser

Show a loading progress image during the page loading process (not during form submission)

The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

Creating a basic JSON array using the push method

Linking an element's class to the focus of another element in Angular

Angular 7's URL updates, but no other actions take place

Error: A TypeError occurred with the startup because it was unable to read the property 'Collection' as it was

sending information from a PHP form to a JavaScript window

Clicking on Only One Card in Material UI React

Issue: Unable to access API target map in AGM using Google Map API

Having trouble applying CSS styles to an element using JavaScript

Adding text with jQuery