Question 208547 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is there a way to use a string from an array as a JSON field name?

I have an ASP.NET Page with a dropdownlist control – I want to eliminate a post back so I have wired the onclient change event to a js function. Since this drop down feeds a lot of controls with data, I am sending the JS an array of clientIds and the associated JSON field name from the returned data (which is acquired via a WebMethod call which returns JSON data for the record).

Below is just a subset of the amount of clientIds I am dealing with (probably 25 total)

c#

protected override void OnRegisterScript()
{
  UxSellerShareholderDdl.OnChange =
      $"SellerShareholder_OnChange(this,{getAllClientIds()});";
}
protected struct ClientId
{
  public string fieldName;
  public string clientId;
}
protected string getAllClientIds()
{
  List<ClientId> ids = new List<ClientId>();
  ids.Add(new ClientId{fieldName = "StreetAddress", clientId = SAddresslbl.ClientID});
  ids.Add(new ClientId{fieldName = "PostalCode",    clientId = SZiplbl.ClientID});
  ids.Add(new ClientId{fieldName = "ContactName",   clientId = SMainContactlbl.ClientID});
  return new jsonScriptSerializer().Serialize(ids);
}

javascript

function SellerShareholder_OnChange(ddl, ctrlList) {
  waitOn();
  PageMethods.UpdateShareholderInfo(GetSelectedOptionValue(ddl), onSuccess, onError);

  function onSuccess(result) {
    const data = JSON.parse(result);
    console.log(data);        
    for(let i = 0; i < ctrlList.length; i++) {
      let obj = ctrlList[i];
      let fld = obj.fieldName;
      if (fld === "PostalCode") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.PostalCode;
        id.innerHTML = data.PostalCode;
      }
      if (fld === "StreetAddress") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.StreetAddress;
        id.innerHTML = data.StreetAddress;
      }
      if (fld === "ContactName") {
        var id       = document.getElementById(obj.clientId);
        var idhdn    = document.getElementById(obj.clientId+"hdn");
        idhdn.value  = data.ContactName;
        id.innerHTML = data.ContactName;
      }
    }
    waitOff();
  }

  function onError(result) {
    waitOff();
    alert('Something wrong.');
  }
}

Instead of all the fld === "Address" then ctrl.innerHTML = data.Address can this be simplified in the loop to do something like ctrl.innerHTML = data.{fld} (so it equates to data.Address)?

Are there better ways in general to achieve what I am trying to accomplish here?

Tags:

2

Answers


  1. 0

    You can use the bracket notation:

    object.property is semantically equivalent in general to object["property"] in JS and other dynamic languages (such as Python). The first is called dot notation, while the second, bracket notation.
    Take a look on this article for more info on it.

    Furthermore, you can do:

    idhdn.value = data[fid];

    To give an example with a value, if for instance fid is StreetAddress, this will do:

    idhdn.value = data["StreetAddress"];

    Kudos to @pilchard for mentioning bracket notation to comments.
    This is the full, detailed answer.

    Update: possible duplicate of this question.

    Login or Signup to reply.
  2. 0

    Couldn’t have explained it better than Nick Louloudakis's here, which gives as final code for the this part in function onSuccess(result):

      for(let obj of ctrlList)
    {
    let
      id    = document.getElementById( obj.clientId );
    , idhdn = document.getElementById( obj.clientId + 'hdn' )
      ;
    id.innerHTML = idhdn.value = data[ obj.fieldName ]; 
    waitOff();
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search