I am new to using JavaScript and need help displaying images and descriptions in a list view on an HTML page retrieved from a JSON object.
I have parsed a JSON object and extracted the image URL and description. Now, I need to showcase the Image and Description in a list view on my HTML page, but I'm unsure how to do it. Please assist me in resolving this issue.
Below is the structure of My HTML Page:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
This is the content of My js file:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
Please guide me on how to arrange and display these Images and Descriptions in a list view as depicted above.