Dynamic details parsing from JSONArray using JQuery and rendering it to the html input element
Suppose you've to populate the details associated with an author and pass them to the div elements at runtime.

Step 1: Parse the JSON array "authorsArray" first. it has the following keys 

AUTHORNAME
NOOFBOOKSPUBLISHED
QUALIFICATION

parsedObj = JSON.parse(authorsArray);

Step 2: Select the author's name from the list and based on the name we've to fetch other details associated with the author

var option = "";

option += "<option value=''>Select Author</option>";
for (var i= 0; i < obj.length; i++)  {
option += "<option value="+obj[i].AUTHORNAME +">"+obj[i].AUTHORNAME +"</option>";
}

$("#authorName").html(option); //map option to select element id

Step 3: populate other details of the author and map them to the respective <input> element.

$(document).on('change', "#authorName", function() {
var selectedAuthor=$(this).val();
if(selectedAuthor!= "") {
let authorObj = parseObj.find(o => o.AUTHORNAME === selectedAuthor);
$("#noOfBooksPublished").val(authorObj.NOOFBOOKSPUBLISHED);
$("#qualification").val(authorObj.QUALIFICATION);
}
})
Write
×