I have two json objects i am getting remotely and one is of this format
{
"form": {
"mounted_language": "en",
"enctype": "multipart/form-data",
"hydration_url": "",
"post_destination": "postFormData()",
"fields": {
"title": {
"type": "text",
"label": "Title",
"data-model": "title",
"value": "",
"required": true,
"name": "title",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"type": {
"type": "text",
"label": "Type",
"data-model": "type",
"value": "",
"required": true,
"name": "type",
"mobile_classes": "",
"desktop_classes": ""
},
"condition": {
"type": "text",
"label": "Condition",
"data-model": "condition",
"value": "",
"required": true,
"name": "condition",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"materials": {
"type": "select",
"label": "Materials",
"required": true,
"data-model": "Materials",
"mobile_classes": "col-6",
"desktop_classes": "col-6",
"name": "materials",
"selected": "selected",
"option_has_url": false,
"options_data_source": "https://example.com/api/url"
},
"color": {
"type": "text",
"label": "Color",
"data-model": "color",
"value": "",
"required": true,
"name": "color",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"weight": {
"type": "number",
"label": "Weight",
"data-model": "weight",
"value": "",
"required": true,
"name": "weight",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"length": {
"type": "number",
"label": "Length",
"data-model": "lengths",
"value": "",
"required": true,
"name": "lengths",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"width": {
"type": "number",
"label": "Width",
"data-model": "width",
"value": "",
"required": true,
"name": "width",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"height": {
"type": "number",
"label": "Height",
"data-model": "height",
"value": "",
"required": true,
"name": "height",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"pictures": {
"type": "file",
"label": "Pictures",
"x-change": "selectFile($event)",
"required": true,
"multiple": true,
"accept": "image/png, image/jpg, image/jpeg",
"name": "pictures",
"value": "",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
},
"description": {
"type": "textarea",
"label": "Description",
"data-model": "description",
"value": "",
"required": true,
"name": "description",
"mobile_classes": "col-6",
"desktop_classes": "col-6"
}
}
}
}
and the other
{
"data": [{
"en": "One"
}, {
"en": "Two"
}, {
"en": "Three"
}, {
"en": "Four"
}]
}
I am getting the first json object and creating a form out of it
$.get("http://localhost:8000/api_routes/agriculture_and_food_structure", function(data) {
data = JSON.parse(data);
let original_json_object = data;
console.log('Original Json Object', original_json_object);
for (let prop in data) {
console.log("Key:" + prop);
for (let prop2 in data.form.fields) {
console.log("Key2:" + prop2);
let typ = data.form.fields[prop2].type;
let label = data.form.fields[prop2].label;
let text_input = '';
if (typ == 'text') {
text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="text" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
}
if (typ == 'number') {
text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="number" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
}
if (typ == 'select') {
let options_data_source = data.form.fields[prop2].options_data_source;
$.get("http://localhost:8000/data_routes/materials_data", function(dt) {
for (let pr in dt) {
console.log('Options', dt[pr]);
}
});
text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <select class="form-control"></select></div></div>';
}
$('#form').append(text_input);
}
}
});
console.log('mounted');
I want to get the individual options here
for (let pr in dt) {
console.log('Options', dt[pr]);
}
so that i append to the select box. How can i output the data in the second json object with the identical key?
2
Answers
To access the data in the second data source (a list of objects) you need to loop over the value at key "data" and extract the option from it. Something like this.
Do this
instead of
You have been experiencing a typical problem linked with asynchronuous processing. You have placed the
<select>code into the page code before the associated options were returned from the second level AJAX call. In the following snippet I tried to change your code so it will work again. I chose to assign generatedids to all select elements. The options received in the secondary AJAX calls are then inserted into the corresponding select elements that were placed onto the page just moments before: