I have a function that, taking a JSON array of objects, where each object has an id and a text field label (variable for each select), it populates the options.
The function I am trying to write is:
function populateSelect(urlString, id, tag){
$.getJSON(urlString, function(data){
$.each(data, function(){
$(id).append($("<option></option>").text(this.tag).val(this.id));
});
});
}
So this.id will always be true as every JSON obect will have an attribute where the key is 'id'. Yet this.tag is what I want to be variable as this can change for each type of JSON object/select I am building.
For example, two valid JSON objects I could be working with are:
[{id:'1', name:'John Doe'}, {id:2, name:'Jane Doe'}]
and
[{id:1, model:'Toyota'}, {id:2, model:'Honda'}]
Each of these JSON objects would be used to populate the <option> fields for the respective <select> element. Thus for the first JSON object if this was not a function to be used for many different Select elements, that line would read:
$.(id).append($("<option></option>").text(this.name).val(this.id));
and the second JSON object would have a line that read:
$.(id).append($("<option></option>").text(this.model).val(this.id));
Apologies if any of the jargon is incorrect, I'm coming up to speed with JQuery.
I think what you are looking for is this:
$.each( data, function( key, value ) {
//get all the properties of the object
var keys = Object.keys(value);
var option = document.createElement('option');
option.value = value.id;
//use the second property as inner html
option.innerHTML = value[keys[1]];
$("#mySelect").append(option);
});
http://jsfiddle.net/e55kW/1/
I updated the jsFiddle of #jmm
#Yoeri pointed out your typo with $.()
Is this fiddle what your trying to attempt?
I just created a string and appended it to the select element.
$.each( data, function( key, value ) {
var option = "<option value="+value.id +">"+ value.name + "</option>";
$("#mySelect").append(option);
});
Found out (prior to coming back and seeing Yoeri's also correct response) that this works:
function populateSelect(urlString, id, tag){
$.getJSON(urlString, function(data){
$.each(data, function(){
$(id).append($("<option></option>").text(this[tag]).val(this.id));
});
});
}
The difference from the above is that I changed this.tag to this[tag]
Related
I have a list of html elements with data attributes, which I would like to assemble into a jQuery object and manipulate the values.
What is the best way to dynamically add these in an each loop so that I can easily access the data as so: data.name and data.name.prop?
I want all the naming conventions to be dynamic and based on the data.
I based my code on the top answer from here: How to create dynamically named JavaScript object properties?
So far I have:
$('.licences-list .data div').each(function(index) {
var data = {}
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
cats.push(data)
})
But when I try to iterate over the data array, like so:
$.each(cats, function(key, value){
$('<div class="card"><p>'+value+'</p></div>').appendTo('#commercial-licenses');
});
I just get [object Object] output... and I'm not sure why!
var data = {}
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
Each time you loop through, you're actually just adding an empty object (data) to your array (cats). You're then assigning a named property to that array (cats) which $.each has no idea about (it ignores them because it's iterating over an actual array).
My guess is you want an object map which is something like: var cats = { "f1": "feline 1", "f2": "feline " };
In that case what you want is:
var cats = {};
$('.licences-list .data div').each(function(index) {
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
})
If you want an array that contain more values than just strings (or whatever data you have added to the element), you create new objects each time and append them to the cats array:
var cats = [];
$('.licences-list .data div').each(function(index) {
cats.push({
'id': $(this).find('p').data('cat'),
'name': $(this).find('p').data('catname')
});
})
This will then give you an array that you can use $.each over, and access the values using: value.id, value.name
Don't over complicate it.
$('.div').attr('data-attribute', 'data-value');
using your example:
$('.licences-list .data div').attr('attribute-name', 'attribute-value');
$scope.populateMap=[{name: "ABC", code: "123"}, {name: "XYZ", code: "345"}]
//Want to send model name + value of model Currently sending ngObject.MainObj.specificFormatObj
HTML
<select ng-model="ngObject.MainObj.specificFormatObj" ng-change="ngObject.MainObj.specificFormatObj">
<option></option>
<option ng-repeat="i in populateMap" value="{{i}}">{{i.name}}</option>
JS
// CONTROLLER CODE JSON parse object to get name and code GOT parsedObj
$scope.genericSetLookups=function (Obj) { // want to do something like get the ngmodel string + the value, currently only value comes in
Obj.code=parsedObj.code;
Obj.name=parsedObj.name
};
More Explanation: ngObject.MainObj.specificFormatObj
I want in my model to store value of lookups in a specific way, with name and code. On the UI I populate using ng-repeat , So when I select a particular value I can either take i.name as display and set value as i.code .
But if i do that my ngObject.MainObj.specificFormatObj.name will be null and the value will get set to ngObject.MainObj.specificFormatObj.code by using ng-model ,so that is the reason in value I am taking i, not i.code or i.value ,now in the map i have code and name pair.
I sent it to a function and parse it, and set the value to ngObject.MainObj.specificFormatObj.code=inputTofunc.code respectively for name. In this case in the ng-change i pass on the ngObject.MainObj.specificFormatObj.code ,rather i want to set i from the map to ngObject.MainObj.specificFormatObj send it to function also the model string which in this case would be "ngObject.MainObj.specificFormatObj" .
So for 10 lookups i can write a generic code ,where the model name and model value i can send as parameter to function and set it there, the above way am doing is probably hardcoding values which i want to set to model in a specific format.
Since you need to pass the model name as a parameter, pass it as a string like this from html :
ng-change="genericSetLookups('ngObject.SomeObject.abc',ngObject.SomeObject.abc)"
And in the controller as the model name contains "." we cannot use the name directly as the key. We need to parse the model name. I have cooked something up after searching a bit. Hope it works.
Controller code:
$scope.genericSetLookups(modelName, value){
Object.setValueByString($scope, modelName, value);
}
Object.setValueByString = function(o, s, val) {
s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
s = s.replace(/^\./, ''); // strip a leading dot
var a = s.split('.');
for (var i = 0, n = a.length; i < n; ++i) {
var k = a[i];
if (k in o) {
if(i != n-1){
o = o[k];
}
else{
o[k] = val;
}
} else {
return;
}
}
return o;
}
Credit must also go to #Alnitak for the answer here
I didn't really understand your problem and the comments didn't make it clearer for me. What I tried to do is give you an example of how I would handle a select box and the model.
I would loop over the options with ng-options and show the selected option by putting {{selected.name}} in the template. Ofcourse if you would want to format the selected value in anyway or react to a change you can use ng-change.
Hope it helps.
Here is my JSFiddle
I'm not sure if I understood your question. If you want to save in your model the value code + name, maybe this code can help you:
<select ng-model="ngObject.MainObj.specificFormatObj" ng-options="(ppm.code + '-' + ppm.name) as ppm.name for ppm in populateMap">
</select>
jsfiddle
I am trying to access the country names from this json -
https://restcountries.eu/rest/v1/all
This is my code for loading that json -
<script>
(function() {
var country = "https://restcountries.eu/rest/v1/all";
$.getJSON( country)
.done(function( data ) {
$.each(data, function(key, value) {
$('#mySelect').empty();
$('#myselect').append('<option>' + data.name + '</option>');
});
});
})();
</script>
The problem may be in data.name statement. I couldn't find any solution on my own. Plus, i am new to JSON. Any help or at least any comment to point my faults will be appreciated.
it should be value.name, data is the array you get from the api, value is each item in the array. also, remove empty as it's remove everything in each loop cyle...
see working code here
I want to create a select box from options stored in a variable (the values will change based on the user).
For now, I'm just trying to get it to work with this variable in my javascript file:
var resp = {"streams": [ {"sweet":"cookies"}, {"savory":"pizza"}]}
In the html file, I have a select id "selectedStream"
How do I invoke, both the select id from html and the variable from javascript to create the select box?
I've seen examples such as the one below, but I don't understand how to link the id and the variable to the box.
$("option:selected", myVar).text()
I hope this was coherent! Thanks
I think what you are trying to do is append option html nodes to an existing select element on your screen with an id of 'selectedStream'. You want to use the data from the 'resp' variable to populate the text and value of the option nodes that you are appending. If this is correct, I have implemented that functionality with this jsfiddle. The javascript is also below:
$(function(){
var resp = {"streams": [ {"sweet":"cookies", "savory":"pizza"}]};
var streamData = resp.streams[0];
var optionTemplate = "<option value=\"{0}\">{1}</option>";
for(var key in streamData){
var value = streamData[key];
var currentOptionTemplate = optionTemplate;
currentOptionTemplate = currentOptionTemplate.replace("{0}", key);
currentOptionTemplate = currentOptionTemplate.replace("{1}", value);
$("#selectedStream").append($(currentOptionTemplate));
}
});
Is that array necessary? If you're just trying to display the keys within that object I'd create a for loop:
var resp = { "streams": {"sweet": "cookies", "savory": "pizza"} }
for (property in resp.streams) {
$('#selectStream').append($('<option/>', {text: property, value: property}));
}
JSFiddle: http://jsfiddle.net/pWFNb/
I want to get the ID values of multiple selection list. The multiple selection list
is generated dynamically. How to get that values? If i can able to get the values means,
can I convert it to JSON object or, it ll be obtained as JSON object!!!!
Here is my code to generate it dynamically.
function displayMultipleList() {
EmployeeManagement.getResponseList(function (respList) {
var respOptionsSelect = document.getElementById('respOptions');
var searchOptions = null;
for (var i = 0; i < respList.length; i++) {
var resp = respList[i];
selectOptions = document.createElement('option');
selectOptions.value = resp.respID;
selectOptions.innerHTML = resp.respName;
respOptionsSelect.appendChild(selectOptions);
}
});
}
Thanks.
You can use the serializeArray() function:
$("#respOptions").serializeArray()
It will return to you the selected objects in a JavaScript array which can be easily stringified to a JSON string.
If your <select> element looks like this (don't forget the name attribute, as serializeArray needs it!):
<select name="respOptions" id="respOptions" multiple="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
If items 2 and 3 were selected, you would get this back from the function:
[{ name: "respOptions", value: "2"}, {name: "respOptions", value: "3"}]
EDIT - I forgot to add the name attribute to the <select> element. Sorry for the confusion.
Taking the ambiguity of the question as a challenge, here are two options.
You're asking "how to get the values" and "convert it to JSON object." Taking that literally, and ignoring the mention of id, you can simply do this:
var x = JSON.stringify( $('#respOptions').val() );
...which will give you a simple (JSON) array of the selected values:
["somevalue","anothervalue"]
But if by "get the ID values" you mean "get the IDs and values of selected options", then you can do something like this:
var y = $('#respOptions option:selected').map( function(i,el){
var result = {};
result[ el.id ] = $(el).val();
return result;
}).get();
y = JSON.stringify(y);
...which will give you an array like this:
[{"id1":"somevalue"},{"id5":"anothervalue"}]
I threw together a fiddle that makes assumptions about your HTML, and mocks in the respList from which the options are dynamically added. It solves the problem both ways.
If your browser doesn't support JSON.stringify, you can use Crockford's oft-recommended json2.js library.
Here's how you iterate over a list of options inside a select element and get the ids:
http://jsfiddle.net/bXUhv/
In short:
$('option', $('#optionlist')).each(function() {
alert($(this).attr('id'));
});
With regard to converting any data into a JSON object, please look into this jQuery library.
Multiple select and If you want the id in a array format
fiddle Example here
var countries = [];
$.each($(".country option:selected"), function() {
countries.push($(this).attr("id"));
});
alert(countries.join(", "));