Retrieving objects from JSON URLs

Question

This is an accounting program (and my first attempt at a web app of any kind) where users need to get and retrieve objects from different JSON URLs and at different levels. Rails is used for the back.

I'd like to know if the following process is the best to use:

1. User clicks button to toggle some boolean value
2. Local JS boolean value is updated
3. PUT request is sent to JSON URL

4. Success or failure response is sent to browser

   • On success, "all changes saved" is sent to the view
   • On failure, a get request is sent to the SAME URL as the put request
   • On success of that get request, the local variable is updated

I also had the idea that I could use one function (putValue in the code below) for all put requests if I make the local javascript object use the same structure as the JSON I am retrieving. Is this a good idea?

After this, I will need to do the same thing for text inputs which I want to write to the server after each keystroke. Can I go about that in the same way as the code above?

This gives the current users account data:

www.example.com/accData.json:
{"deleteWarning":true,"displayHiddenFields":true,"groups":[{"id":2,"text":"My Company"}]}

A user has many microposts, which each have one template:

www.example.com/microposts/9/template.json
{"id":9,"name":"template","templateIndex":0,"shared":true,"micropost_id":9}

Users can get and put to these URLs.

A function in an Angular factory is used to put to these addresses.

//Put a single objValue into the parentKey  SQL table
var putValue = function(objValue, objKey, parentKey) {

  var putURL = '';
  var obj = {};

  //create the obj to be put
  var accObj = {}; 

  //tell the notification variable what's happening
  viewed.current.status = "saving...";

  //update local variable and define save location
  if (typeof parentKey === 'string') {
    putURL = '/microposts/' + viewed.sig.id + '/' + parentKey + '.json';
    viewed.sig[parentKey][objKey] = objValue;
    obj[parentKey] = accObj;
  } else {
    putURL = '/accData.json';
    viewed.accData[objKey] = objValue;
    obj = {acc_datum:accObj};
  }

  accObj[objKey] = objValue;

  //tell the console what's happening
  console.log("object sent to acc_datum is:");
  console.dir(obj);

  //do the put request
  return $http.put(putURL, obj).then(
    //on success do nothing
    function(response){},
    //on failure, get the data again
    function(response){

      //CHANGE BELOW - need this to update the correct local 
      //variable not just viewed.accData

      //getData from putURL and put it into the local js object
      viewed.accData = getData(putURL, 'accData');
    }
  );
};

Answer 1

Just a note about your comments, you don't need so many of them. Sometimes the name of functions are clear enough that anyone with a passing knowledge of the language/tools can follow it.

//tell the console what's happening
console.log("object sent to acc_datum is:");

//do the put request
return $http.put(putURL, obj).then(

Those are pretty self explanatory and taking up space, you could remove them.

Also it's better not to split a comment about 2 possiblities like this:

//on success do nothing
function(response){},
//on failure, get the data again
function(response){

They're part of one thought, combine them:

//on success do nothing, on failure get the data again
function(response){},
function(response){

This keeps your comments and code separated more cleanly.