Javascript-将对象添加到对象-如何处理数组？

Question

Working with a javascript object, I am struggling to figure out how to add new data (specifically more objects) to it. When it comes to adding data, I am not sure how to turn the existing value into an array of objects.

Here is an example of my object:

It's pretty straight forward, doesn't contain any arrays at this point. This is where I get stuck.

var obj = {
  "data": {
    "VersionForTarget": "1",
    "RulesContainer": {
      "Rule": { // <--- New Rule Goes Here
        "RuleParentID": "1",
        "RuleVersionID": "1",
        "MappedValue": "1",
        "ProcessingOrder": "1",
        "MetaInsertUtc": "2017-03-03T17:54:34.643",
        "Value": "Omaha",
        "IsRuleRetired": "0",
        "UserImpactCount": "2277",
        "AttributeContainer": {
          "Attribute": { // <--- New Attribute Goes Here
            "AttributeID": "6",
            "AttributeName": "Campus",
            "AttributeDetailsContainer": {
              "AttributeDetails": { // <--- New Attribute Details Goes Here
                "RuleDetailID": "1",
                "AttributeID": "6",
                "OperatorID": "3",
                "AttributeValue": "1",
                "RuleParentID": "1",
                "Value": "Omaha",
                "IsValueRetired": "0",
                "OperatorName": "In List",
                "SqlOperator": "IN"
              }
            }
          }
        }
      }
    }
  }
};

If I wanted to add a new object of data to Rule , Rule then becomes an array of Rule objects.

What I am going for:

I am essentially trying to make three functions. One that will add a Rule , one that will add an Attribute to a specified rule, and one that adds AttributeDetails to a specified attribute in a specified rule.

// This will add a new rule
function addRule() {

  var newRule = {
    "RuleParentID": "3",
    "RuleVersionID": "1",
    "MappedValue": "4",
    "ProcessingOrder": "5",
    "MetaInsertUtc": "2017-03-03T17:54:34.643",
    "Value": "New Thing",
    "IsRuleRetired": "0",
    "UserImpactCount": "2277"
  };

}


// This will add a new attribute
function addAttribute(RuleParentID) {

  // Add attribute object in our parent rule

  var newAttribute = {
    "AttributeID": "6",
    "AttributeName": "Campus",
  }

}


// This will add new attribute details
function addAttributeDetails(RuleParentID, AttributeID) {

  // Add attribute details to our specified attribute in our specified parent rule

  var newAttributeDetails = {
    "RuleDetailID": "1",
    "AttributeID": "6",
    "OperatorID": "3",
    "AttributeValue": "1",
    "RuleParentID": "1",
    "Value": "Omaha",
    "IsValueRetired": "0",
    "OperatorName": "In List",
    "SqlOperator": "IN"
  }

}

My Question

What are some approaches I can take to a take like this? I thought about looping through the data RuleContainer for example but Rule could either may or may not be an array.

I have read through some of the documentation for lodash and have used some of the functions like _find to at least get my bearings on where I need to manipulate but then I can't figure out where to go from there.

Any suggestions?

Here is a fiddle of this setup with an example of the outcome that would be possible with such working functions.

https://jsfiddle.net/tor1t2q6/1/

Answer 1

To solve your problem you could have RuleContainer be an array instead of an object.

var obj = {
  "data": {
    "VersionForTarget": "1",
    "RulesContainer": [//array bracket
      "Rule": { // <--- New Rule Goes Here
        "RuleParentID": "1",
        "RuleVersionID": "1",
        "MappedValue": "1",
        "ProcessingOrder": "1",
        "MetaInsertUtc": "2017-03-03T17:54:34.643",
        "Value": "Omaha",
        "IsRuleRetired": "0",
        "UserImpactCount": "2277",
        "AttributeContainer": {
          "Attribute": { // <--- New Attribute Goes Here
            "AttributeID": "6",
            "AttributeName": "Campus",
            "AttributeDetailsContainer": {
              "AttributeDetails": { // <--- New Attribute Details Goes Here
                "RuleDetailID": "1",
                "AttributeID": "6",
                "OperatorID": "3",
                "AttributeValue": "1",
                "RuleParentID": "1",
                "Value": "Omaha",
                "IsValueRetired": "0",
                "OperatorName": "In List",
                "SqlOperator": "IN"
              }
            }
          }
        }
      }
    ]
  }
};

Answer 2

I made some changes in your fiddle along the lines of what I think you're asking. The gist of it is that you can just transform the 'Rule' object into an array from the get-go and then not worry about it, and that should work regardless of whether Rule is given to you initially as an array or an object.

const objectWithRuleAsArray = initRuleArray(obj);
function initRuleArray(object) {
    if(Array.isArray(object.data.RulesContainer.Rule)) {
    return object;
  } else {
    const ruleData = object.data.RulesContainer.Rule;
    object.data.RulesContainer.Rule = []
    object.data.RulesContainer.Rule.push(ruleData);
    return object;
  }
}
let rulesArray = objectWithRuleAsArray.data.RulesContainer.Rule
rulesArray.push(addRule());
console.log('Created Rules Array & Added Rule', rulesArray);

Then from there you can start to add your functions which modify the the array (& objects in the array) as needed. Here going through the array to find the correct ID, then adding the new properties to that object.

// This will add a new attribute to the object
function addAttribute(p_array, p_ruleParentID) {

  var newAttribute = {
    "AttributeID": "6",
    "AttributeName": "Campus",
  }

    // Add attribute object in our parent rule
    p_array.forEach((item, index)=>{
    console.log(item, index)
    // note that the IDs here are saved as strings, not numbers
    if(parseInt(item.RuleParentID, 10) === p_ruleParentID) {
        console.log('found id');
      for(const prop in newAttribute) {
        if (newAttribute.hasOwnProperty(prop)) {
            item[prop] = newAttribute[prop]
        }
      }
    }
  })

  return p_array;

}

rulesArray = addAttribute(rulesArray, 3);
console.log('Added Attribute', rulesArray);

Modified fiddle: https://jsfiddle.net/04podo35/2/

Answer 3

As you don't mention about your purpose of storing and updating the JSON data, I will assume that the data is used for simple CRUD operations. If that is the case, then it's better to consider altering the whole JSON structure. The main reasons:

• Difficult to perform simple operations: it mostly take O(n) time to perform search/deletion based on object's ID; you always have to loop the whole array to get the matched one.
• Duplication of data: Attribute will likely be duplicated whenever you want to add an Attribute to more than 1 Rule; same goes for AttributeDetail. This will also increase complexity of insertion operations.
• Nested data structure: nesting Rule, Attribute and AttributeDetail will cost you a lot when performing operations. Maintaining it will also be a chore.

My suggestion: don't use array. Store Rule, Attribute and AttributeDetail using their IDs as key. In this way, you don't need to worry about whether the object is an array or not; also it helps to simplify simple CRUD operations. Here is an example of using RuleVersionID, AttributeID and combination of RuleDetailID-AttributeID to store the same data.

var obj = {
  "data": {
    "VersionForTarget": "1",
    "RulesContainer": {
      "Rule": { // <--- New Rule Goes Here
        "1": { 
          "RuleParentID": "1",
          "RuleVersionID": "1",
          "MappedValue": "1",
          "ProcessingOrder": "1",
          "MetaInsertUtc": "2017-03-03T17:54:34.643",
          "Value": "Omaha",
          "IsRuleRetired": "0",
          "UserImpactCount": "2277",
          "AttributeContainer": {
            "Attribute": { // <--- New Attribute Goes Here
              "6": {
                "AttributeID": "6",
                "AttributeName": "Campus",
                "AttributeDetailsContainer": {
                  "AttributeDetails": { // <--- New Attribute Details Goes Here
                    "1-6": {
                      "RuleDetailID": "1",
                      "AttributeID": "6",
                      "OperatorID": "3",
                      "AttributeValue": "1",
                      "RuleParentID": "1",
                      "Value": "Omaha",
                      "IsValueRetired": "0",
                      "OperatorName": "In List",
                      "SqlOperator": "IN"
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
};

You can use any other attribute to be keys as long as it helps to identify objects.

So your function addRule can look like this (here I use 2 lodash methods: set and has )

function addRule(newRule) {
  if (has(newRule, "ruleVersionID")) {
    var path = "data.RuleContainer.Rule." + newRule.ruleVersionID;
    set(obj, path, newRule); 
    return path;
  }
  return null;
}

I also strongly recommend you to flatten your data: keeping Rule, Attribute, AttributeDetail in the same level. Here is an example of keeping them away from each other:

var obj = {
  "data": {
    "VersionForTarget": "1",
    "RulesContainer": {
      "Rule": {
        "1": {
          "RuleParentID": "1",
          "RuleVersionID": "1",
          "MappedValue": "1",
          "ProcessingOrder": "1",
          "MetaInsertUtc": "2017-03-03T17:54:34.643",
          "Value": "Omaha",
          "IsRuleRetired": "0",
          "UserImpactCount": "2277"
        }
      }
    },
    "AttributeContainer": {
      "Attribute": {
        "6": {
          "AttributeID": "6",
          "AttributeName": "Campus",
        }
      }
    },
    "AttributeDetailsContainer": {
      "AttributeDetails": {
        "1-6": {
          "RuleDetailID": "1",
          "AttributeID": "6",
          "OperatorID": "3",
          "AttributeValue": "1",
          "RuleParentID": "1",
          "Value": "Omaha",
          "IsValueRetired": "0",
          "OperatorName": "In List",
          "SqlOperator": "IN"
        }
      }
    }
  }
};

For more details, you can read this documentation about JSON normalization. This is where my solution comes from.