- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How To Modify This JavaScript Code To Grab An Image URL From A JSON File, And Display It In HTML?
This can be done by using the JavaScript method JSON.parse() to parse through the JSON file and extract the URL of the desired image. Then, an HTML img tag can be created with a source attribute set to this URL. Finally, this img tag can be appended to an existing HTML element in order to display it on your page.
This will require some knowledge of basic JavaScript syntax, as well as familiarity with how JSON is structured and parsed within it. With these skills in hand, you should have no trouble modifying your code to achieve your goal!
Let’s dive into the article for getting better understanding on modifying JavaScript code to grab an image URL from a Json file, and displaying it in HTML.
Using JSON.parse()
The static method JSON.parse() creates a JavaScript value or object from a JSON string by parsing it. Before the resultant object is returned, a transformation can be applied using an optional reviver function.
Syntax
Following is the syntax for JSON.parse() −
JSON.parse(text) JSON.parse(text, reviver)
Example
Considering the following example, where we are using JSON.parse(), running the script, and displaying the image.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
json_data = '{"icon_url": "https://www.tutorialspoint.com/images/logo.png"}';
json_data = JSON.parse(json_data);
var getimage = document.createElement("img");
getimage.onload = function() {
document.getElementById("tutorial").appendChild(getimage);
}
getimage.src = json_data.icon_url;
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an image that gets displayed on the webpage by using JSON.parse().
Example
Execute the below script and observe how we are going to use JSON.parse() to get images displayed on the webpage.
<!DOCTYPE html>
<html>
<body>
<button id="button" >click</button>
<img id="tutorial">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#button").on("click",function(){
var json='{"status":200,"count":1,"data":[{"image":"https://www.tutorialspoint.com/images/logo.png"}]}';
var obj = jQuery.parseJSON(json);
imagedata = obj.data[0].image;
if (imagedata == ""){
$( "#tutorial" ).attr('src', "imageerror.jpg");
} else {
$( "#tutorial" ).attr('src', imagedata);
}
});
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the click button on the webpage. When the user clicks the button, the event gets triggered and displays the image on the webpage.
Example
In the following example, we run the script, grab the image URL, and make it appear on the webpage.
<!DOCTYPE html>
<html>
<body>
<div id="tutorial"></div>
<script>
var data = {
"images": [{
"image1": "https://www.tutorialspoint.com/images/logo.png"
}, {
"image1": "https://www.tutorialspoint.com/static/images/logo-color.png"
}, {
"image1": "https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
}, ]
};
data.images.forEach(function(obj) {
var image = new Image();
image.src = obj.image1;
document.getElementById("tutorial").appendChild(image);
})
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an image that gets displayed on the webpage.
4K+ Views
