htmlのページでjavascriptの値を読み込む方法

Question

これは私のスクリプトコードです。ここで配列のリストを取得し、次に反復して変数を取得します。今私の必要条件は、私が設計したHTMLページにこの値を表示することです。私は再試行された値を私のページにロードする必要があります。そのイメージを表示するには、img srcの内部にimageurlを付ける必要があります。プラスこれは動的に増加する必要があります。

<script> 
 
    function getValueFromServer(e) { 
 
    //make the AJAX request to server 
 
    $.ajax({ 
 
    type: "GET", 
 
    url: "http://example./../getAllBrandList", 
 
    dataType: "json", 
 
    //if received a response from the server 
 
    success: function(data) { 
 
     console.log(data); 
 
     var brands=data; 
 
     var i = 0 
 
     //our country code was correct so we have some information to display 
 
     for (var i = 0; i < brands.allBrands.length; i++) { 
 
     var obj = brands.allBrands[i]; 
 
     console.log(obj); 
 
     var fundedType= "LIVE"; 
 
     var url=obj.url; 
 
     var imageUrl=obj.image_url; 
 
     var brandName=obj.brandName; 
 
     var description=obj.description; 
 
     var totalGoal=obj.total_goal; 
 
     var totalRaised=obj.total_raised; 
 
     var profitMargin=obj.profit_margin; 
 
     } 
 
    }, 
 
    //If there was no resonse from the server 
 
    error: function(jqXHR, textStatus, errorThrown){ 
 
     console.log("Something really bad happened " + textStatus); 
 
     $("#ajaxResponse").html(jqXHR.responseText); 
 
    }, 
 
    //capture the request before it was sent to server 
 
    beforeSend: function(jqXHR, settings){ 
 
    //adding some Dummy data to the request 
 
        settings.data += "&dummyData=whatever"; 
 
        //disable the button until we get the response 
 
        $('#myButton').attr("disabled", true); 
 
       }, 
 
       
 
       //this is called after the response or error functions are finsihed 
 
       //so that we can take some action 
 
       complete: function(jqXHR, textStatus){ 
 
        //enable the button 
 
        $('#myButton').attr("disabled", false); 
 
       } 
 
     
 
      });   
 
    }; 
 
window.onload = getValueFromServer(); 
 
    </script>

<div class="small-12 columns" onload="getValueFromServer()"> 
 
    <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3" id="brands"> 
 
     <!-- <li class="item" > 
 
     <a href="" class="badge-live" data-badge="LIVE" ></a> 
 
     <a href=""><div class="offer"> 
 

 
      <span class="link-overlay"></span> 
 

 
      <img src="" id="imageurl"> 
 
      <div class="offer-info"> 
 
      <h6 id="brandname"></h6> 
 
      <p class="offer-short" id="description"></p> 
 
      <p class="funded"> 
 
       <span class="goal"> 
 
       <strong id="totalgoal">$</strong> raised 1 day ago in 13 minutes 
 
       </span> 
 
      </p> 
 
      <div class="nice round progress"><span class="meter-reserved" style="width: 100%;"></span><span class="meter" style="width: 100%;"></span></div> 
 
      <div class="row offer-stats"> 
 
       <div class="small-12 columns text-center"> 
 
       <p> 
 
        <span id="profitmargin">%</span> Co-Op Profit Margin 
 
       </p> 
 
       </div> 
 
      </div> 
 
      <hr style="margin:0.5rem 0 1rem;"> 
 
      <div class="row text-center offer-stats"> 
 
       <div class="small-6 columns"> 
 
       <p> 
 
        <span>96</span>following 
 
       </p> 
 
       </div> 
 
       <div class="small-6 columns" style="border-left: 1px solid #dbdbdb;"> 
 
       <p> 
 
        <span>4</span>Months 
 
       </p> 
 
       </div> 
 
      </div></a> 
 
      <div class="text-center"> 
 
       <a href="http://localhost/sample/signup.html" class="button radius offers-button color:black">GET STARTED</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> --> 
 
     
 
     
 
    </ul> 
 
    </div>

Answer 1

テストしていませんが、brands ULにリストを書くことinnerHTMLを使用して動作するはずは

function getValueFromServer(e) { 
 
    //make the AJAX request to server 
 
    $.ajax({ 
 
    type: "GET", 
 
    url: "http://example./../getAllBrandList", 
 
    dataType: "json", 
 
    //if received a response from the server 
 
    success: function(data) { 
 
     console.log(data); 
 
     var brands=data; 
 
     var i = 0 
 
     //our country code was correct so we have some information to display 
 
     for (var i = 0; i < brands.allBrands.length; i++) { 
 
     var obj = brands.allBrands[i]; 
 
     console.log(obj); 
 
     var fundedType= "LIVE"; 
 
     var url=obj.url; 
 
     var imageUrl=obj.image_url; 
 
     var brandName=obj.brandName; 
 
     var description=obj.description; 
 
     var totalGoal=obj.total_goal; 
 
     var totalRaised=obj.total_raised; 
 
     var profitMargin=obj.profit_margin; 
 

 
document.getElementById("brands").innerHTML += '<li class="item" >\ 
 
     <a href="" class="badge-live" data-badge="LIVE" ></a>\ 
 
     <a href=""><div class="offer">\ 
 
      <span class="link-overlay"></span>\ 
 
      <img src="'+imageUrl+'" id="imageurl">\ 
 
      <div class="offer-info">\ 
 
      <h6 id="brandname">'+brandName+'</h6>\ 
 
      <p class="offer-short" id="description">'+description+'</p>\ 
 
      <p class="funded">\ 
 
       <span class="goal">\ 
 
       <strong id="totalgoal">$'+totalGoal+'</strong> raised 1 day ago in 13 minutes\ 
 
       </span>\ 
 
      </p>\ 
 
      <div class="nice round progress"><span class="meter-reserved" style="width: 100%;"></span><span class="meter" style="width: 100%;"></span></div>\ 
 
      <div class="row offer-stats">\ 
 
       <div class="small-12 columns text-center">\ 
 
       <p>\ 
 
        <span id="profitmargin">%'+profitMargin+'</span> Co-Op Profit Margin\ 
 
       </p>\ 
 
       </div>\ 
 
      </div>\ 
 
      <hr style="margin:0.5rem 0 1rem;">\ 
 
      <div class="row text-center offer-stats">\ 
 
       <div class="small-6 columns">\ 
 
       <p>\ 
 
        <span>96</span>following\ 
 
       </p>\ 
 
       </div>\ 
 
       <div class="small-6 columns" style="border-left: 1px solid #dbdbdb;">\ 
 
       <p>\ 
 
        <span>4</span>Months\ 
 
       </p>\ 
 
       </div>\ 
 
      </div></a>\ 
 
      <div class="text-center">\ 
 
       <a href="http://localhost/sample/signup.html"\ class="button radius offers-button color:black">GET\ STARTED</a>\ 
 
      </div>\ 
 
      </div>\ 
 
     </div>\ 
 
     </li>'; 
 
     } 
 
    }, 
 
    //If there was no resonse from the server 
 
    error: function(jqXHR, textStatus, errorThrown){ 
 
     console.log("Something really bad happened " + textStatus); 
 
     $("#ajaxResponse").html(jqXHR.responseText); 
 
    }, 
 
    //capture the request before it was sent to server 
 
    beforeSend: function(jqXHR, settings){ 
 
    //adding some Dummy data to the request 
 
        settings.data += "&dummyData=whatever"; 
 
        //disable the button until we get the response 
 
        $('#myButton').attr("disabled", true); 
 
       }, 
 
       
 
       //this is called after the response or error functions are finsihed 
 
       //so that we can take some action 
 
       complete: function(jqXHR, textStatus){ 
 
        //enable the button 
 
        $('#myButton').attr("disabled", false); 
 
       } 
 
     
 
      });   
 
    }; 
 
window.onload = getValueFromServer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="small-12 columns" onload="getValueFromServer()"> 
 
    <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3" id="brands"> 
 

 
    </ul> 
 
    </div>