Object or array or both

Question

I have following code that needs to be simplified.

MenusDeroulants(string, html_element) is a function I'm using on 11 pairs and that gives me the following:

        MenusDeroulants("GetListeCatDdeurs", $("#cbx_Cat_Ddeur"));
        MenusDeroulants("GetListeCommunautes", $("#cbx_Communaute"));
        MenusDeroulants("GetListeOccupations", $("#cbx_Occupation"));
        MenusDeroulants("GetListeProvinces", $("#cbx_Province"));
        MenusDeroulants("GetListeScolarites", $("#cbx_Scolarite"));
        MenusDeroulants("GetListeSexes", $("#cbx_Sexe"));
        MenusDeroulants("GetListeSituations_Matrimoniales", $("#cbx_SituationMatrimoniale"));
        MenusDeroulants("GetListeSource_De_Revenus", $("#cbx_SrceRevenu"));
        MenusDeroulants("GetListeStatuts_Legaux", $("#cbx_StatutLegal"));
        MenusDeroulants("GetListeTranche_Revenu", $("#cbx_TrancheRevenu"));
        MenusDeroulants("GetListeVilles", $("#cbx_Ville"));

Is there a way to simplify it? My understanding of arrays and objects is so limited I could not find a way to create one to loop on.

CertainPerformance · Accepted Answer · 2018-07-05 02:06:51Z

5

Use an array of objects instead. You could also use an array of arrays, but an array of objects will be a bit more readable, because it has property names that describe what its values are:

const list = [
  { string: 'GetListeCatDdeurs',   selector: '#cbx_Cat_Ddeur' },
  { string: 'GetListeCommunautes', selector: '#cbx_Communaute' },
  { string: 'GetListeOccupations', selector: '#cbx_Occupation' },
  // etc
];
list.forEach(({ string, selector }) => {
  MenusDeroulants(string, $(selector));
});

Not sure what all MenusDeroulants calls are going to be, but if the first argument always starts with GetListe and the selector is always an ID that starts with cbx_, you could repeat yourself less by adding those common substrings in during the forEach loop:

const list = [
  { subString: 'CatDdeurs',   subSelector: 'Cat_Ddeur' },
  { subString: 'Communautes', subSelector: 'Communaute' },
  { subString: 'Occupations', subSelector: 'Occupation' },
  // etc
];
list.forEach(({ subString, subSelector}) => {
  MenusDeroulants('GetListe' + subString, $('#cbx_' + subSelector));
});

answered Jul 5, 2018 at 2:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrice Over a year ago

Thanks. Exactly what I meant.

geekley · Accepted Answer · 2018-07-05 02:09:00Z

0

One way to do it:

let params = [
  {method: "GetListeCatDdeurs", elem: "#cbx_Cat_Ddeur"},
  {method: "GetListeCommunautes", elem: "#cbx_Communaute"},
  // etc...
];
for (p of params)
  MenusDeroulants(p.method, $(p.elem));

answered Jul 5, 2018 at 2:09

geekley

1,83715 silver badges34 bronze badges

Comments

Bibek Shah · Accepted Answer · 2018-07-05 02:22:32Z

0

You can create an array of objects like this:

var arr = [
  { 'fn': 'GetListeCatDdeurs', 'div': 'cbx_Cat_Ddeur' },
  { 'fn': 'GetListeCommunautes', 'div': 'cbx_Communaute' },
  { 'fn': 'GetListeOccupations', 'div': 'cbx_Occupation' } // continue...
];

arr.forEach(x => {
  MenusDeroulants(x.fn, $('#' + x.div));
});

Or you can just make an array of div names. It is even easier if all those divs are children of a single div. Then generate the GetListeCatDdeurs via RegEx. For Example:

var arr = [
  'cbx_Cat_Ddeur',
  'cbx_Communaute',
  'cbx_Occupation', // etc...
];

arr.forEach(x => {
  var fn = 'GetListe' + x.slice(x.indexOf('_') + 1).replace(/_/g, '') + 's';
  MenusDeroulants(fn, $('#' + x));
});

edited Jul 5, 2018 at 2:22

answered Jul 5, 2018 at 2:12

Bibek Shah

4294 silver badges19 bronze badges

Comments

Patrick Evans · Accepted Answer · 2018-07-05 02:23:43Z

0

I would say just store the values as data-* attributes on the elements and get them dynamically with dataset or data(). Give each element a common identifier like a class and just loop over that collection.

HTML

<select id="cbx_Cat_Ddeur" class="dropdowns" data-method="GetListeCatDdeurs"></select>

JS

$('.dropdowns').each((index,element)={
  MenusDeroulants(element);
});

function MenusDeroulants(element){
  var method = element.dataset['method'];
  //or
  var method = $(element).data('method');
  /* do the rest of work */
}

This way you don't have to dig through a bunch of other JS if anything like the string value or id of element changes. No need to store static arrays or objects etc.

edited Jul 5, 2018 at 2:23

answered Jul 5, 2018 at 2:17

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Collectives™ on Stack Overflow

Object or array or both

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related