Question

你好我正在做一个ajax请求 to print a json file on my html ，但我有一个问题，当我试图这样做，我没有任何反馈或错误...事实上，当我点击检查元素他们在DOM（标签+ json文件）里面这里是我的代码，我希望有人可以帮助我 ...``json文件显然是外部的，但我放在这里......

＆＃13;

var robot = (function (window,undefined){
    var jsonObj = "";
    function ajaxRequest(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4 && xhr.status === 200){
                try {
                    jsonObj = JSON.parse(xhr.responseText);
                    console.log(jsonObj.artista.length);
                }

                catch(error){
                    console.error("json parse error", error);
                }



                var sideBarContent= "";
                var desktopContent = "";


                var playlistContainer = document.getElementById("slide-out");
                var plalistContainerDesktop = document.getElementById("collection");

                for(var i = 0; i < jsonObj.artista.length; i++){
                    sideBarContent += '<li><audio src="'+jsonObj.artista[i].song+'"><span>'+ jsonObj.artista[i].cancion +'</span></audio></li>';
                    playlistContainer.innerHTML = sideBarContent;
                    console.log(sideBarContent);

                    desktopContent += '<audio src="'+jsonObj.artista[i].song+'"><span>'+ jsonObj.artista[i].cancion +'</span></audio>';
                    plalistContainerDesktop.innerHTML = desktopContent;
                }
            }
        }
        xhr.open("GET", "js/list.json", true);
        xhr.send();

    };


//    chooseItem function (){
//        for(var i = 0; i < jsonObj.artista.length; i++){
//            if (){}
//        }
//    };


    ajaxRequest();

    return {
        ajaxRequest : ajaxRequest,
//        chooseItem : chooseItem,
    };
})(window);

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mr Robot - Web Player</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css">


</head>
	<header>

    	<nav class="deep-orange">
    		<div class="container">
			    <div class="nav-wrapper">
			      	<a href="#!" class="brand-logo">Mr Robot</a>
			      	<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
			      	<ul class="right hide-on-med-and-down">
			        	<li><i class="material-icons">add</i></li>
			      	</ul>
			      	<ul class="side-nav" id="slide-out">
			        	<!-- contenido dinamico -->
			        	<li class="active"><a href="#">Playlist</a></li>
<!--			        	<li><a href="sass.html">Bible Black</a></li>-->
<!--			        	<li><a href="badges.html">cancion 2</a></li>-->
<!--			        	<li><a href="collapsible.html">cancion 3</a></li>-->
<!--			        	<li><a href="mobile.html">cancion 4</a></li>-->
<!--			        	<li><a href="mobile.html">cancion 5</a></li>-->
			      	</ul>
			    </div>
			</div>
		 </nav>

	</header>
	<section class="content">
		<div class="container">

			<div class="row">
			    <div class="col s12 m9">
			        <div class="card">
			            <div class="card-image">
			              	<img class="responsive-img" src="http://i.ytimg.com/vi/2KH83vVDNc4/maxresdefault.jpg">
			              	<span class="card-title"><h3>Demonizer</h3></span>
			            </div>
			            <div class="card-content">

			            	<div class="row controls">
			            		<div class="col m3 s3">
			            			<i class="material-icons">skip_previous</i>
			            		</div>
			            		<div class="col m3 s3">
			            			<i class="material-icons play">play_arrow</i>
			            		</div>


			            		<div class="col m3 s3">
			            			<i class="material-icons">skip_next</i>
			            		</div>

			            		<!-- <div class="col m3 s3">
			            			<i class="material-icons">repeat</i>
			            		</div> -->
			            	</div>




			            </div>
			            <div class="card-action">
			              <a href="#">artista-cancion</a>
			            </div>
			        </div>
			    </div>

			    <div class="col md3">
			    	<div class="collection" id="collection">
			    	    <a href="#!" class="collection-item deep-orange">Playlist</a>

 					</div>
			    </div>
			</div>





		</div>
	</section>
	<section id="carlos"></section>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
	<script type="text/javascript" src="js/mat.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

＆＃13;

我无法在html中打印我的json文件

0 个答案: