通过索引从数组更新JSON键值

Question

I am using Angular javascript to accomplish a task where I need to update a JSON key value from an array on click function.

I have JSON structure like this:-

$scope.jsonObj = {
    "stylesheet": {
        "attribute-set": [{
                "attribute": {
                    "_name": "text-align",
                    "__prefix": "xsl",
                    "__text": "center"
                },
                "_name": "__frontmatter",
                "__prefix": "xsl"
            },
            {
                "attribute": [{
                        "_name": "space-before",
                        "__prefix": "xsl",
                        "__text": "80mm"
                    },
                    {
                        "_name": "line-height",
                        "__prefix": "xsl",
                        "__text": "140%"
                    }
                ],
                "_name": "__frontmatter__title",
                "_use-attribute-sets": "common.title",
                "__prefix": "xsl"
            }
        ],
        "_version": "2.0",
        "__prefix": "xsl"
    }
};

I have an array $scope.textvalue=["center", "80mm","150%"] . So here I want to update the key value __text of the JSON according to index. Means i want to push the array details according to index of __text in the JSON and array.

I am doing this on button click in controller .

$scope.save = function(index) {
    $scope.textvalue[index];
    console.log($scope.textvalue);
    $scope.objIndex = $scope.jsonObj.findIndex((obj => obj.__text));
    console.log("Before update: ", $scope.jsonObj[$scope.objIndex]);
    $scope.jsonObj[$scope.objIndex].__text = ? ? ? ;
    console.log("After update: ", $scope.jsonObj[$scope.objIndex]);
}

I did $scope.jsonObj[$scope.objIndex].__text = ??? ; as I don't know what to do here and I have an error as $scope.jsonObj.findIndex is not a function

Suggest me some way to update my JSON value.

Answer 1

I would do it like this. I created a function like you (except it's not in AngularJS right now, but you can very easily make it).

You pass the index to the function, it will iterate over the occurances of __text and figure out where to put the value.

Here's the working snippet: (see the 150% in the last/3rd __text value when I pass corresponding index)

 let jsonObj = { "stylesheet": { "attribute-set": [{ "attribute": { "_name": "text-align", "__prefix": "xsl", "__text": "center" }, "_name": "__frontmatter", "__prefix": "xsl" }, { "attribute": [{ "_name": "space-before", "__prefix": "xsl", "__text": "80mm" }, { "_name": "line-height", "__prefix": "xsl", "__text": "140%" } ], "_name": "__frontmatter__title", "_use-attribute-sets": "common.title", "__prefix": "xsl" } ], "_version": "2.0", "__prefix": "xsl" } }; let textvalue = ["center", "80mm", "150%"]; let textvalueIndex = 0; function save(index) { let updated = jsonObj.stylesheet['attribute-set'].reduce(function(agg, obj) { if (Array.isArray(obj.attribute)) { for (let i = 0; i < obj.attribute.length; i++) { if (textvalueIndex === index) { obj.attribute[i].__text = textvalue[textvalueIndex]; } textvalueIndex++; } } else { if (textvalueIndex === index) { obj.attribute.__text = textvalue[textvalueIndex]; } textvalueIndex++; } agg.push(obj); return agg; }, []) console.log(updated) } save(2) // third item in textvalue array will be saved on the third occurance of __text 

Answer 2

The main problem is that attribute can be either an object literal or an array of object literals. Here is a function that travels through jsonObj by comparing __text and return a reference to the attribute in question. If nothing is found, a new attribute is added and returned instead :

function getAttribute(__text) {
  var attributes = $scope.jsonObj['stylesheet']['attribute-set']; 
  for (var i=0, l=attributes.length; i<l; i++) {
    var attribute = attributes[i].attribute;
    if (attribute.length) {  //array of attributes
       for (attr in attribute) {
         if (attribute[attr].__text == __text) return attribute[attr]
       }
    } else {  //attribute literal
      if (attribute.__text == __text) return attribute
    } 
  }
  var index = attributes.push({  
    attribute: { __text: __text } 
  });
  return attributes[i].attribute
}

example:

var center = getAttribute('center');
center.NEW_VALUE = 'TEST';

var new_attr = getAttribute('new_attr');
new_attr.__prefix = 'SOMETHING';  

Answer 3

You can do it by iterating over the $scope.jsonObj.stylesheet["attribute-set"] array using Array.forEach() method and updating the relevant "__text" properties, respectively for each attribute object/array.

• I used Array#isArray() method to check if the iterated attribute property is an array or an object .
• I copied the $scope.textvalue array into arr and used Array#shift() method to get the relevant value from the arr array in each iteration.

This is how should be your code:

const arr = $scope.textvalue.slice();
$scope.jsonObj.stylesheet["attribute-set"].forEach(function(a) {
  if (Array.isArray(a.attribute)) {
    a.attribute.forEach(att => att["__text"] = arr.shift());
  } else {
    a.attribute["__text"] = arr.shift();
  }
});

Demo:

 $scope= {}; $scope.jsonObj = { "stylesheet": { "attribute-set": [{ "attribute": { "_name": "text-align", "__prefix": "xsl", "__text": "center" }, "_name": "__frontmatter", "__prefix": "xsl" }, { "attribute": [{ "_name": "space-before", "__prefix": "xsl", "__text": "80mm" }, { "_name": "line-height", "__prefix": "xsl", "__text": "140%" } ], "_name": "__frontmatter__title", "_use-attribute-sets": "common.title", "__prefix": "xsl" } ], "_version": "2.0", "__prefix": "xsl" } }; $scope.textvalue = ["center", "80mm", "150%"]; const arr = $scope.textvalue.slice(); $scope.jsonObj.stylesheet["attribute-set"].forEach(function(a) { if (Array.isArray(a.attribute)) { a.attribute.forEach(att => att["__text"] = arr.shift()); } else { a.attribute["__text"] = arr.shift(); } }); console.log($scope.jsonObj);