Is it possible to itetrate through an object array dynamically and assign the text and value field t-CodePudding

I have an object array for one of the drop down to be binded as follows

[
{CategoryId: 1, CategoryName: 'Collision'},
{CategoryId: 2, CategoryName: 'Groundig'}
]

I am able to bind it to dropdown with following code

function bindDropDown(data, dropDown, defaultText) {
   var items = "";
   items  = "<option value=-1>Select "   defaultText   "</option>";
    $.each(data, function (i, item) {
      items  = "<option value=\""   item.CategoryId   "\">"   item.CategoryName   "</option>";
    });
   $(dropDown).html(items);
 }

I would like to reuse it so that I can use the same for a different drop down where I will get different options like

[
{SubCategoryId: 1, SubCategoryName: 'Collision'},
{SubCategoryId: 2, SubCategoryName: 'Groundig'}
]

I am trying to assign the value and text dynamically with out hardcode, is there a way to do that?

CodePudding user response：

You can make the id and value of the select dynamic. I have made use of default value for the arguments aswell.

Working Fiddle

const data = {
  Data: [
    { CategoryId: 1, CategoryName: 'Collision' },
    { CategoryId: 2, CategoryName: 'Groundig' }
  ]
}

const data2 = {
  Data: [
    { SubCategoryId: 1, SubCategoryName: 'Collision2' },
    { SubCategoryId: 2, SubCategoryName: 'Groundig' }
  ]
}

function bindDropDown(data, dropDown, defaultText, idKey="CategoryId", nameKey="CategoryName") {
  var items = "";
  items  = "<option value=-1>Select "   defaultText   "</option>";
  $.each(data.Data, function (i, item) {
    items  = "<option value=\""   item[idKey]   "\">"   item[nameKey]   "</option>";
  });
  $(dropDown).html(items);
}

bindDropDown(data, "#my-select", "please-select");
bindDropDown(data2, "#my-select-2", "please-select", "SubCategoryId", "SubCategoryName");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<select name="" id="my-select"></select>
<select name="" id="my-select-2"></select>

CodePudding user response：

Use Object.values if you do not know or need to know the key names

Also if you do not use jQuery to create the options, I suggest you use template literals to create them. Much more readable

const data = {
  Data: [
    { CategoryId: 1, CategoryName: 'Collision' },
    { CategoryId: 2, CategoryName: 'Groundig' }
  ]
}

const data2 = {
  Data: [
    { SubCategoryId: 1, SubCategoryName: 'Collision2' },
    { SubCategoryId: 2, SubCategoryName: 'Groundig2' }
  ]
}

function bindDropDown(data, dropDown, defaultText) {
  let items = [`<option value="-1" selected>Select ${defaultText}</option>`,
    ...data.Data.map(item => `<option value="${Object.values(item)[0]}">${Object.values(item)[1]}</option>`)]
  $(dropDown).html(items.join(""));
}

bindDropDown(data, "#categories", "Please select");
bindDropDown(data2, "#subcategories", "Please select");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<select name="" id="categories"></select>
<select name="" id="subcategories"></select>