0

I'm looking for a better way to handle dynamic populating of my options using JS and JQuery. What I have is working but I am looking for a way to not have t ore-write the function each time I need to populate a list.

Fiddle

And what I am doing is populating these:

<label for="recordPurchaseTimeFrameID" class="input required">When would you like to move?</label> <select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame"> 

<label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label> <select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range">

Using these scripts:

var rPTJsonListItems= ""; for (var i = 0; i < rPTJsonList.recordPurchaseTimeTable.length; i++){ rPTJsonListItems+= "<option value='" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeValue + "'>" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeAmount + "</option>"; }; $("#recordPurchaseTimeFrameID").html(rPTJsonListItems); var rPPJsonListItems= ""; for (var i = 0; i < rPPJsonList.recordPurchasePriceTable.length; i++){ rPPJsonListItems+= "<option value='" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceValue + "'>" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceAmount + "</option>"; }; $("#recordPurchasePriceRangeID").html(rPPJsonListItems);

And using this to populate the dropdowns:

var rPTJsonList = { "recordPurchaseTimeTable" : [ {"recordPurchaseTimeValue" : "","recordPurchaseTimeAmount" : "Select"}, .... ]}; var rPPJsonList = { "recordPurchasePriceTable" : [ {"recordPurchasePriceValue" : "","recordPurchasePriceAmount" : "Select"}, {"recordPurchasePriceValue" : "75k-100k","recordPurchasePriceAmount" : "$75,000 - $100,000"}, .... });

So what I'd like is to have just one main function that populates each unique ID based on it's correlating JSON.

Anyone have any suggestions?

Improve this question
2
  • Why the data so verbose? You can simplify and abstract if you get straight collections from your JSON, not a nested object. Commented Feb 18, 2014 at 1:51
  • Yes that would be what I am looking for... so not having each list coming from a unique defined variable but a master JSON list instead. Commented Feb 18, 2014 at 1:54

1 Answer 1

Reset to default
1

I would suggest you simplify your data as a collection, instead of nested objects, that way you can abstract more easily:

var timeTable = [{ "recordPurchaseTimeValue": "", "recordPurchaseTimeAmount": "Select" }, { "recordPurchaseTimeValue": "3-6", "recordPurchaseTimeAmount": "3-6 months" }, { "recordPurchaseTimeValue": "6-9", "recordPurchaseTimeAmount": "6-9 months" }, { "recordPurchaseTimeValue": "9-12", "recordPurchaseTimeAmount": "9-12 months" }, { "recordPurchaseTimeValue": "12", "recordPurchaseTimeAmount": "Over 12 months" }]; var priceTable = [{ "recordPurchasePriceValue": "", "recordPurchasePriceAmount": "Select" }, { "recordPurchasePriceValue": "75k-100k", "recordPurchasePriceAmount": "$75,000 - $100,000" }, { "recordPurchasePriceValue": "100k-125k", "recordPurchasePriceAmount": "$100,000 - $125,000" }, { "recordPurchasePriceValue": "125k-150k", "recordPurchasePriceAmount": "$125,000 - $150,000" }, { "recordPurchasePriceValue": "150k-200k", "recordPurchasePriceAmount": "$150,000 - $200,000" }, { "recordPurchasePriceValue": "200k-250k", "recordPurchasePriceAmount": "$200,000 - $250,000" }, { "recordPurchasePriceValue": "250k-300k", "recordPurchasePriceAmount": "$250,000 - $300,000" }, { "recordPurchasePriceValue": "300k-350k", "recordPurchasePriceAmount": "$300,000 - $350,000" }, { "recordPurchasePriceValue": "350k-400k", "recordPurchasePriceAmount": "$350,000 - $400,000" }, { "recordPurchasePriceValue": "400k-500k", "recordPurchasePriceAmount": "$400,000 - $500,000" }, { "recordPurchasePriceValue": "500k-700k", "recordPurchasePriceAmount": "$500,000 - $700,000" }, { "recordPurchasePriceValue": "700k-900k", "recordPurchasePriceAmount": "$700,000 - $900,000" }, { "recordPurchasePriceValue": "900k", "recordPurchasePriceAmount": "$900,000" }];

Then you can create a function to populate selects given the data as a collection, and the attributes to set on each generated option, that map to a given key.

We can use document fragments to improve performance, as you only need to append to the DOM once.

Demo: http://jsfiddle.net/Ls4mD/

function populateSelect(select, data, attrs) { var frag = document.createDocumentFragment(); data.forEach(function(option) { var opt = document.createElement('option'); for (var i in attrs) { opt[i] = option[attrs[i]]; } frag.appendChild(opt); }); select.appendChild(frag.cloneNode(true)); } var time = document.getElementById('recordPurchaseTimeFrameID'); var price = document.getElementById('recordPurchasePriceRangeID'); populateSelect(time, timeTable, { value: 'recordPurchaseTimeValue', textContent: 'recordPurchaseTimeAmount' }); populateSelect(price, priceTable, { value: 'recordPurchasePriceValue', textContent: 'recordPurchasePriceAmount' });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That's exactly what I was looking for. Thank you. Gave you the win.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.