Can I change var in jQuery(JavaScript)?

Question

After an AJAX call, I get the JSON data like this:

{
  "detailPrice": {
    "server": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "network": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "storage": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "loadBalancer": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "others": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "support": {
      "amount": "8",
      "usedPrice": "10",
      "discountPrice": "-1",
      "totalPrice": "9"
    },
    "totalPrice": {
      "totalUsedPrice": "8",
      "totalDiscountPrice": "-2",
      "missedPrice": "10",
      "tax": "9",
      "otherDiscount": "-1"
    }
  }
}

I have to append these data to the view, so I made a code like this:

var serverpriceHTML = "총 " + result.detailPrice.server.amount + "대<br/>";
serverpriceHTML += "이용요금 " + result.detailPrice.server.usedPrice + "원<br/>";
serverpriceHTML += "할인요금 " + result.detailPrice.server.discountPrice + "원<br/>";
var serverTotalPriceHTML = result.detailPrice.server.totalPrice + "원";
$("#server_price").html(serverpriceHTML);
$("#server_totalprice").html(serverTotalPriceHTML);

var networkpriceHTML = "총 " + result.detailPrice.network.amount + "대<br/>";
networkpriceHTML += "이용요금 " + result.detailPrice.network.usedPrice + "원<br/>";
networkpriceHTML += "할인요금 " + result.detailPrice.network.discountPrice + "원<br/>";
var networkTotalPriceHTML = result.detailPrice.network.totalPrice + "원";
$("#network_price").html(networkpriceHTML);
$("#network_totalprice").html(networkTotalPriceHTML);

As you can see, it has a lot of duplicated code, so I'm trying to make a private function about it.

The problem is:

result.detailPrice.server.amount

I have to change server to network, storage, loadbalancer and etc. to get the data, but I'm not sure how can I change this.

If I make like:

function makeHTML(price, totalPrice, name) {
  var test = "result.detailPrice" + name + ".amount";
  var serverpriceHTML = "총 " + test + "대<br/>";
  serverpriceHTML += "이용요금 " + result.detailPrice.server.usedPrice + "원<br/>";
  serverpriceHTML += "할인요금 " + result.detailPrice.server.discountPrice + "원<br/>";  
  var serverTotalPriceHTML = result.detailPrice.server.totalPrice + "원";

  $(price).html(serverpriceHTML);
  $(totalPrice).html(serverTotalPriceHTML);
}

This is just adding string test. Any good idea about this?

Answer 1

You can specify the different variable values such as :-

//This will give you some private variables for following:-
var constants={
server=function(){return 0},
network=function(){return 1},
storage=function(){return 2},
loadBalancer=function(){return 3},
others=function(){return 4},
suport=function(){return 5},
totalPrice=function(){return 6}
}

Then you can take up the JSON in a variable like below:-

You can alter the JSON as follows:-

var jsonData= {
           "detailPrice":{
              {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "amount":"8",
                 "usedPrice":"10",
                 "discountPrice":"-1",
                 "totalPrice":"9"
              },
                {
                 "totalUsedPrice":"8",
                 "totalDiscountPrice":"-2",
                 "missedPrice":"10",
                 "tax":"9",
                "otherDiscount": "-1"
              }

           }
        }

and then call it anywhere as follows:-

jsonData.detailPrice[constant.server];//For Server Details
jsonData.detailPrice[constant.network];//For Network Details

And so on. Hope this sounds helpful.

Answer 2

Use [] notation to access values when you want to use string values.

Instead of

var test = "result.detailPrice" + name + ".amount";

try

var test = result.detailPrice[name].amount;

Dot notation does not work if , you want to replace a variable value.

Simple Example

var obj = {
       "ball" : "bat"
    };

var name = "ball";

// If you use dot notation

obj.name (Gives you undefined) (It will try to get the get the key = name) It won't replace the variable name

// [] Bracket notation

obj[name] (Gives you bat) It will replace the variable name and get the value