How do i go about reading the json script in my html website and making them loo
ID: 3747724 • Letter: H
Question
How do i go about reading the json script in my html website and making them loop with jquery/ajax, please help with resolving.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="books"></div>
<script>
(function() {
var flickerAPI = "http://it-ebooks-api.info/v1/search/modern%20web";
$.getJSON( flickerAPI, {
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#books" );
});
});
})();
</script>
</body>
<body>
<script>
(function() {
var flickerAPI = "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC";
$.getJSON( flickerAPI, {
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#books" );
});
});
})();
</script>
</body>
<body>
<script>
(function() {
var flickerAPI = "https://www.googleapis. com/books/v1/volumes? q=modern%20web";
$.getJSON( flickerAPI, {
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#books" );
});
});
})();
</script>
</body>
</html>
Explanation / Answer
If you have any doubts, please give me comment...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="books"></div>
<script>
(function() {
var flickerAPI = "http://it-ebooks-api.info/v1/search/modern%20web";
$.getJSON(flickerAPI, {
format: "json"
})
.done(function(data) {
$.each(data.items, function(i, item) {
$("<img>").attr("src", item.media.m).appendTo("#books");
});
});
})();
</script>
</body>
<body>
<script>
(function() {
var flickerAPI = "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC";
$.getJSON(flickerAPI, {
format: "json"
})
.done(function(data) {
$.each(data.items, function(i, item) {
$("<img>").attr("src", item.media.m).appendTo("#books");
});
});
})();
</script>
</body>
<body>
<script>
(function() {
var flickerAPI = "https://www.googleapis.com/books/v1/volumes?q=modern%20web";
$.getJSON(flickerAPI, {
format: "json"
})
.done(function(data) {
$.each(data.items, function(i, item) {
console.log(item);
$("<img>").attr("src", item.volumeInfo.imageLinks.thumbnail).appendTo("#books");
});
});
})();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.