Question

下面的我的JS代码抓取JSON对象并将它们打印在网页上，但只打印文本。 I.E.这将打印图像URL（实际文本）与显示实际图像。如何更改下面的代码...在代码中的某处添加img src =以在页面上显示实际图像？

	function onShowtimesLoaded(data){
			var movieArray = data.results[0].movie;
			movieArray.forEach(function(el, index) {
				
	       		var elm = document.createElement('div');
	       		elm.setAttribute('id','movie_'+parseInt(index+1));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Title: " + el.movieTitle));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Poster: " + el.poster));
	       		elm.appendChild(document.createElement('br'));
	       		elm.appendChild(document.createTextNode("Movie Show Times: " ));
	       		var showtimes = el.showtimes.forEach(function(element, index) {
					elm.appendChild(document.createTextNode("  "+element.time+"  "));
				});
				document.getElementById("MovieContainer").appendChild(elm);
			});
    }
	function callAPI() {
		var pincode = document.getElementById("pincode").value;
	    (function(){
	            //note the "onShowtimesLoaded" at the end
	            var src = 'closesttheater-'+pincode+'.json?format=json&callback=onShowtimesLoaded';
	            script = document.createElement('SCRIPT');
	            script.src = src;
	            document.head.appendChild(script);
	    })();
    }

Answer 1

这听起来不错？

<script>
function onShowtimesLoaded(data){
            var movieArray = data.results[0].movie;
            movieArray.forEach(function(el, index) {

                var elm = document.createElement('div');
                elm.setAttribute('id','movie_'+parseInt(index+1));
                elm.appendChild(document.createElement('br'));
                elm.appendChild(document.createTextNode("Movie Title: " + el.movieTitle));
                elm.appendChild(document.createElement('br'));
                var tmp_img = document.createElement('img');
                tmp_img.src = el.poster;
                elm.appendChild(document.createTextNode("Movie Poster: " ));
                elm.appendChild(tmp_img);
                elm.appendChild(document.createElement('br'));
                elm.appendChild(document.createTextNode("Movie Show Times: " ));
                var showtimes = el.showtimes.forEach(function(element, index) {
                    elm.appendChild(document.createTextNode("  "+element.time+"  "));
                });
                document.getElementById("MovieContainer").appendChild(elm);
            });
    }
    function callAPI() {
        var pincode = document.getElementById("pincode").value;
        (function(){
                //note the "onShowtimesLoaded" at the end
                var src = 'closesttheater-'+pincode+'.json?format=json&callback=onShowtimesLoaded';
                script = document.createElement('SCRIPT');
                script.src = src;
                document.head.appendChild(script);
        })();
    }
    </script>

方法：JSON图像URL显示为实际图像

1 个答案: