On a grid I have to create a (popup) form dynamically, based on a JSON that has the data for what type of input goes on the form. For the select type, the options are different for every form, and all the options are in another JSON that is called based on the name on the previous JSON.
example. I click on button "create report" for row number 1 on grid. popup open up with form to get the filter of the report. the button call the 1st JSON that is like this:
[
{
"name": "Report Users residence",
"input": [{
"type": "select",
"name": "city",
},
{
"type": "select",
"name": "address",
}]
}
]
In this case the cities are in another JSON called "city.json".
[
{
"code": "000000",
"description": "City1"
},
{
"code": "000001",
"description": "City2",
}
]
I was able to create the form, but i don't know how to get the option of the 2nd JSON on the select "city".Can someone give me an example on how to do it?
First, city data have to converted into object. After that using jQuery $.each method, you can loop over city object to create option for select and append into the select.
This is an example of the idea :
<select name="city"></select>
<script>
var city = [{"code":"000000","description":"City1"},{"code":"000001","description":"City2",}];
var citySelect = $(document).find('select[name="city"]');
$(city).each(function(key,item){
var cityOption = new Option(item.description,item.code);
citySelect.append(cityOption);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="city"></select>
<script>
var city = [{"code":"000000","description":"City1"},{"code":"000001","description":"City2",}];
var citySelect = $(document).find('select[name="city"]');
$(city).each(function(key,item){
var cityOption = new Option(item.description,item.code);
citySelect.append(cityOption);
});
</script>