How to load javascript values in html page

Question

This is my script code where i will get a array list, then i have iterated and got each one in a variable. Now my requirement is to show this values in my html page which i have designed. I have to load the retried values in my page. The imageurl should be given inside the img src to show that image. Plus this should be dynamically incremented.

  <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

not tested but should work using innerHTML to write list to brands ul

  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>