How to pass JavaScript data to jQuery DataTables - javascript

I'm very frustrated trying to insert and show a JSON within a table. I'm using jQuery DataTable to do it.
I have the following jQuery and HTML code but without success:
<table id="sectorsTable">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var jsonArray = { layersSelected: temporaryArraySectors };
var jsonString = JSON.stringify(jsonArray, null, 2);
$('#sectorsTable').dataTable({
'ajax': jsonString
});
</script>
By the way, the content of the vars is:
temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
jsonString = '{"layersSelected": [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ] }';
What is wrong?


You don't need to create JSON string with JSON.stringify, just set data option equal to temporaryArraySectors.
See example below for code and demonstration.
$(document).ready(function() {
var temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
var table = $('#sectorsTable').DataTable({
data: temporaryArraySectors
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<table id="sectorsTable" class="display">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Related

jQuery I'm using to make the rows of my table sortable is not working

I'm re-writing a project of mine to better align with the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed is not there (I can see it in my old code).
I have the relevant code duplicated on this sheet, but I'll include it here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_top">
<?!= include('1.1 openPackV2Stylesheet'); ?>
</head>
<body>
<div class="grid-container">
<table id="awayLineup">
<thead>
<tr>
<th></th>
<th>Rtg</th>
<th>Season</th>
<th>Name</th>
<th>Age</th>
<th>Team</th>
<th>OB</th>
<th>Out</th>
<th>Walk</th>
<th>Single</th>
<th>Single+</th>
<th>Double</th>
<th>Double+</th>
<th>Triple</th>
<th>Homer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?!= include('1.1 openPackV2Javascript'); ?>
</body>
</html>
1.1 openPackV2Javascript
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
function displayAwayLineup(awayLineup){
// $('.loading').style.display("hidden");
var tbody = $('#awayLineup > tbody');
for (i in awayLineup){
tbody.append(
'<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
}
}
// make tables sortable
$(window).on("load", function(){
$("table tbody").sortable({
helper:function(e,row){
var originalCells = row.children();
var cloneRow = row.clone();
cloneRow.children().each(function(index){
$(this).width(originalCells.eq(index).width());
})
return cloneRow;
}
});
});
</script>

When I saw your script, it seems that jQuery UI is not loaded. So, how about the following modification?
From:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
To:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
});
In your script, var awayLineup = of var awayLineup = google.script.run can be removed.
Reference:
jQuery UI

Using DataTables Plugin in Razor View - Cannot set properties of undefined (setting '_DT_CellIndex') Error

I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>

Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```

displaying image to html from json file

Im a newbie. The data already display in the table even the image. but the problem is when i use div id and call this id for using the display of my image from json file. it didnt show the image in div. Any help? Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Show JSON Data in Jquery Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h3><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
<th>Image Path</th>
<th>Support</th>
</tr>
</thead>
</table>
</div>
<label for="name" id="name">Name</label>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table= $('#data-table').DataTable({
"ajax" : "employee_data.json",
"columns" : [
{ "data" : "name" },
{ "data" : "gender"}
]
});
$('#data-table tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
} );
});
</script>
JSON FILE
{"data":[{"name":"dfghj","gender":"asdfg","designation":"dfgh","image":"<img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAMAAAAYGZMtAAAAqFBMVEX\/\/\/\/MAADNAwPRAADPAADJAADNAgPNCAjOFBT77u7OERHUISH99fXNCwvQIyPNDg7TGhr++vrOGxv11tbRLCz66urXOzvWT0\/SMTHVKyv99PTQISHTPz\/55+f23NzTNTXVSUnyysrZX1\/rq6vvwsLaTk7nmZnif3\/bWVnsuLjkiYnmkpLgbm7moKDYRUXgd3fgg4PeZmbqp6fts7PdcXHdV1feX17lfHy4OLf0AAAeNElEQVR4nO1diWKiSBBNpbsFQVCRcEQUTzxQFK\/8\/59tVbfmmJl4EBMzs6ndnR1vKKpevTq6ubv7kR\/5kR\/5kR\/5katKvdK+9SF8K2lNTTNkw8dbH8e3kXXGUAybhfVbH8q3kPYIteFZBmOh2XFvfTS3l3p\/AoxpuVkLGasxgzdufUQ3lvYTRz1YNWYyHs7tSDNZeutjuqVU+i6TooUsn6F11Df4wPv\/Imx7xjnpI2CMm6v9kyk+6N\/0sG4nE2PMpoa0ET7rPj\/9iI+zGx7WzaTb73qzwRDh1OP2vPL6pZyH7H8HsJV+wPnMnftmaL02ECVdXuOjmxzXzaSbA2c7NtzmGGJWf0DSmhfz\/xFde5ybnPWQkSGA8PxXA1GyQm9af\/Fx3Uy6iyBH9JxSoGVJ+Z13VTTGoi89rlvJw7THDXcs1cF7fzYQJQ0Mzf9+Rlxvp4iaCRF2xu13DWQvhhasjr\/jr5fWXGOpydiSl04YiBLvH6cm9XY25DNOHhNua8k5ZD1hGv93ARYdJjW0Ts42fsjHZ1Kwshuy5ece181kPcW0n8UBMzvcTB7O\/lyXMTj\/3X+PNFqIpMzNn4bch9ngos9irP7nSgSVdYezklGbMY+z7bp14ccbjC3+LQbbeuKZxFMMukP\/MgNRMmPxP5T7Pa6ayMaIgZgxN9NimDDgbHbl47qZNBAGajVUCdJynhe+0nWfZf8Egy0PMmAlZrFFj3n29FIEeS0Di02udlw3k27O3Z3GFguO9jEsgiCvpP7EF9c5rJtJeR5SITVHhwkS\/iEDkVJpWeyDWr2tDGbcqNn70nJ2lVhRX4Z\/b3HtIZmGCCDhxjYzO1t+2ECUVMosv9JXfbUMtmgctRJjXlxjiytCYpJ7yfW+7cuklTJuyb4D\/bu8al6yiji75vd9hdQnHUJUyw5JKdm10\/lpLcz+LoBtLzVPdS+DkPPRxbyqvD7hZG3mLsdFj+7rpT6ZkX24nEXoMdHlBtJdCBAn3pOZBj9Rkvw28tj32PaJMQPTmFlYwEASR3SgJE6UHCc84n8FwJZXnmkuVtPhLDYZ9y5vaXfHXQDY4n8nWhN1CmUFj\/LL5KHf2CCiDmf51NUwxBQzEJEHYKFGenDi4yN0ytPF6xtKdxoyPptwtpuuuBlyb31xkaebgwdV2CxAq9qgwwl62kb1f9sSQXk9zuQsSHTHNzU25NnlBlKZ2wJtw0fz6IHj4l9dcUKpESvBt5y\/aScR1LJayUClhAm1MPP+xQZSyQVEBtxDLwKxBJih3\/TghFsMeGbMix72p0k7DWssZGaG4SVjQY4IsimU1tmgNatwfw8RgD2DDLLoJBGr00Uo8mOfJ+2pScN1bFhTpKw2McNJ5fTn\/iQrMHwPrcRAjTizQJyVHi4QYL9RDbadWDVShRmaNvHUKoLrovjxVQS4GqrEysCF\/Mz0sG0y9l1KBA9JzEus6iM5LWUZi2vIQXarD\/URNoCug\/+5GIGX52bMiFz8OwBspd8qKU9hKVqHOWbDsFQAQdZvolJDRJmHkBpgzBmc299c8ZDffoqg298122gcplLKuGn1vNHlCNJedsTmzTP22N0glBCgxJ0zq0MVdFz70p++rjykITdYWN8bCXJUtNwCCDLpCAdg+EaRfQJWAMsGw8sO\/c1Tvrhh4U0BduJLPmayFmOaxViM+vBWlxtIqokmBtoA3mRAFYCNhSaiB2AYKg1uj+Ynvr0BJtscf8vnCUZcRJCxGY401lZzy3yxuTzHQANpEpAmyE+DN6+MNFtHfAWkfhRz6oOFEOkpKmZiGlEw7n9QBkPOsjEG29UYmVmDezTFPS9SrsDzzZC3V2NHB\/HG5ssATgBjfDEzYDYF0fOQ1Z\/4urnP2A0myFupqawiDamKOnya45\/vzGCelIlK\/S1wETjetqdiwFyvp8G4EwAlOZACiBPJ0mMUsLjYkRSXrkIQpKk7ZvH5ZMejCZsXZwOx7qJ\/OONqUALx5mv6VBGADZRmm40qmSC05Ce+bvbVDLaiunQHMXecpUn\/Q\/W9KVg+niqefbX61gbqAvQoAte30FrQjizKecSJH+vi8T195Hguk\/aC9LHdZzDIUFkQz4rMP5TLLyf2IGCDdAxGAqrwtt4xAnSmUQfDcAKG3iSKAuIkwFr2l02QD1QNhA2HzDM98htW213eJ2ivh7omnKB30IoPxhKxwpojDcnfmElb9ELM+xynmY11HUJUSOdUGL6b4yF+yYBjpRu8cpiaYT1l3L5gxG4vD4krBEZWAy1C7A98IKyxGIeAzCT13pIKdBv0FehgfPY6IMTsDJR45F8yQd4e1Wolxocs0KyI\/oIh53IOUh9sqVCm6egAmoawsP8GpB1zjC65rxv3bytna8yHQev5qZYsNumZeWQPAfaz52+6Y5YuYub1e\/4IA00tmQ9Lp6a4f5dWN0GFNIloUG0IBXT1yqAXCh1hoxP\/GmTr4Gqa4Th9\/KQ4t3FFAPvJJYLlU6k+oPn+lIeY36Gnji9HkMFYzJcURmEh8OxRH6gTobLWluiMdbBCjLNIQt58bCSQx3mwRES5F+eWCGrM+MT2cKVVzwdTts4ww6Tl26zJtPTioYUHzGJAPGzA3vXiZL4hzRikFku9Pia7gXtjBlXtLYNtNyOftNGRNcczfy5h2qcBbCvdoSYink\/QFm029A0+vpykNsYCr36QpbsoivqxjVi5sR1pJ\/sLPxAKRpv059s43JktfSQlGRqLZp+JEGX+WQsN6skjMnbMXry7TC29HF08pEvSoBCzmeiY6oIdUcBRPNSD0uHCQ4a+BDOpmLcMdu3GY3o2ppz4uTpUOY5kBLCfMn\/zsFM8hE+60Kwxvi06qzDOYBkLMDpUXl4+3pV1m85Sw390deGTaoRJzGIJ9yWYveFideF3SH+RTQ0\/FXJaixMdrAEe+LTgwR4TdJYaEVU+vss8Xp1ezEHKh3MbkFUgfuqkCDrUQY+esUsRBKqE+ADNHLRgRCz2F8gYORvisG7kWDr5WX0dlUTbP\/7TjFmzqzLYx2me7nrM1pCS0cB+ZTS9fIKquxHPSAmUyErwADUTEYGjBwgRkIE68rGYQFUPe3Dvw9vZ77aInQCJK\/6hQ6c1AnS8dCKOW2zKLLhi7tdaqPlcw2WZyWZxkRy3PK+K2Hhu4i4hKikmgqqhWDCnbAXuPYieARYT\/wjxVQvs7K1bREHPIacZU\/MP4QhiI4DOcTNpcT64mpU0EEBCZj5T99\/WKp8h3VzQ+Rkg9vlIWyhuRoYCFAsqIpTRpdo88JBq00feTg5lQfyWwaIe7hUi3wPV2UR\/DIvFcfgcsyS8DsAOfMr4NY3NfVlZZpenuY9z2wCthCdQuocDmmQHlZDrEKJudEnXPKSy6vwTkTkeWkBGYPK2LEboatSoe3EPIX5ggiEsHR9PiAlgr7FEZ42ZC9oHd8csX2icdy53R2kgnuaAQxHieQuaiXhWyb2gUaGBshtiYepHysL3PbQHhxTQfPOd0wBKWkCtcsldGhuBenH8445BFn7x0f8ilcTY0qqH2jbiAee5V2RId0ako0RGniOCBu7zMBU8m4km7aIlno1mj9zoMzapY4bO9XYGqz1TTKZPzb8dEr+qDsI5Ma4yxUv7sQHHhxHlSozXasxLRv1Bt1gqOaeD3l\/\/UjoH7VAWnD6DiS4BdvL8GPYH3hWUEN5TcPq1mojpoI6KznMQozYGcyGmJxGuhefzkQHHxg6YaYbj6XzQKgbUFeX+6OXVmic56OhuiiZj7Glm6wVgwfLqiXxI6jEOEHznuDnNCUSkEth\/rCtfnAjZ8wPH6t4h3thnFXqHjIWFC8Ld5WY+aXykftpeCq7g7kDWxfwup\/9XDyjY2auEvAOlEVGeh8ghnkEwkewFtpQByupSee7vQ7SMNqiTfqUk8jPtF5nm+Fb739RXYXUL+zLxmFIRhMjpnS8cKhU5hyMU+xiMwRfVIro9spH4VRGkLGAEup4FZGQhAXWzeq+yN+l2MGoPTi62fyUYKG6zaqkxy5qOZOo9epjgtdQXSB3QMzSn+gopJa0IFFSgzkSyobLQ67piroC5Bxi9CVdIhMR45DWYIUaXtYrKnneDVUv1dSDdBK+hpUmO3R01iWxN18rS0RMOVJSuNGypxChdRod8KeDNZezKHFkjKymBE0EmVgAqB+qAMC4t9D5GbfOrW6GNhZBOXpKnP4PqHSWu5C1NPLvq3lHEK4Cl5A+qFlhoL47Qf73oDgRjBUXgz0YQ60RmJdxP\/AIkemhePjb4MZnqEvQ0gga0EoRNQkpZ\/mpK7nqvovEBYH3JtGSc0ajq\/rujz0Ent0qRnNpiTl6mP5fxL5dGXnR7sXq9UkyXbVnHAE3Di06nHtjk+CmxrYVShi\/N5zDEvWew0s8g+hMPRIDVY0KTcgKaq5FFne6Lv3NWtKfUafby28dajXUynReu72dIIzq6qi1TuhaCrwBhbkvr15bSr94yWIJXspQ\/XoZZjATEHhDdh2aTQnK4LHJ4jSdMz0w418Ae6\/WHxmS+7NFSw+Bk7+yITIQGdmRQzq43UQsdB2lEResFhCQdGVhswtLe\/v2psp2X3O836VK73ClPOc3MayAKrWMiA6HF+nCm27R9u8a4nJDh\/PIRu\/obAAAZOfDYETzcQBbKMKFryPaVDDAwJUZ24KetV7nfO\/7ggEa9HIjnQkAxA9k8Ac2a8uFZXlOZs5rBPYNZBuPx5XDcWIrm63lBddqQurChJmXTAX+pBkaasMxIYbF8x2GVjK\/itcST6I+XY06jSA5yWndaCFYHHuXyBmOzs9TZGlXRnnI1e1jAQPqe5A2v8gYZV3VIbHBjq5oFVPwijETzh6gvDOSxvmSzhwMWJeOQ2\/T+OFH2KGSRCKZFDKT9VDLlYDYfnUVhBn0+k\/s\/oNgFRuxkzZPK6q+rgB010U2BJ8Z8DQ2j16iIkQs9X7REilhJTDR7BbAKSTL6xB+NNPFBxJcvU0FZ57QoDM8uOWsDpcpcg9xmXpOZbgEEuevH1JxSNv+6ljGRfmHvqboYtuogBpEfgOMsuiN8Qcco6jwXE\/cAqyAW\/jiy24XLl6ncEWvUuNwAhQdn5TWN1DCZGdNK1D9vc3hc2qMmzVp68syJgL56TRqOKqM2\/XQOfYSRpTcizE3bVBvQ7WoGLwwWDmhivQewRfL5yuApnw2zLDLPI7mTDLJQLlZm7HLuUllnM+GAyuqJluoGvKppqhSVOnW2N8E0mMDFDijZhegOGYil0YTR\/TPAbkBOV6mC43UHHh5b3bN6ka3UVjNlCCJhEQ7Soiqqti9XoHt0QLfEyy+3VGGRrEi0aRjExUdEytE06n0ho20EL5Y1oPUThzh8i0VngyfObLVguQC5lVJxqD0NOmnE0ChWRD686qH44GzQGAzQtimaQBWhNSfWWY0RcxzK9l0EE+e5E5WDJuuvUsVfPrKbWuQs0mnM4jOYC2LVIK+7YePfiGu8GvSYyGER1FonhrLsXoYQj6gcjc6yIOhtwnMx5U6Wzqhm4L0PsJ8nDRpdDmosYHz5kZWiXVCNOQg0QhKQLfxXAVTTPKIjPtLNSV8Qp3CsqazST+\/aSE0cFXYPzvaAocvA2KxJDPrYKV4o5X2vjseDj5lng4aWqblyX0XIMKjzhnb\/MveUyvGZoO0SoEZOD+5tA5oL0tvdHRWR1RDWMyb3MC9aqokbOLU+\/F2ZDL1Fsp5PLmqrrLjcSrfoFPeLVCRG0pSDvavGsgB4fx+\/RIsHCrVxMqWiYLshRhrSEAhykBGlb4HKfKWCpNDScI8q86TKQss1H6aU5iaYpxkXkX7aSjc4i8a9kkp3PZ3ko7c9nJ7lQGjQeu7OCIOHbqFSvNrLmLqfuW6CkccJxIjQown7HhVlorEsJUnPOQAszTlrpMACSRamFY3dLg9NLVh4lptf5AC0svqya\/C47pSWAi9w1xWdVznCsgOU4+PV7jSEwpUS2OIZGgcAayqSWHkg6pUFaJEqEo17MwJnpRJ4YbCJqtAXWir7sFxwc+pZrGYmbHuhB1RQJe4FNfv2Rqw2msDT38ks\/+WVyZLGqUglYjCl+rnyg5fxqRH0XJC7AqAlkHKqsvoYZQ6V1p+7N2KvZkwLhVcI4CadRbxlbLUxGbdXl7dnJ2atlJ3b9Gj1BERzPJsdBVQLT+iFejyQaTga1GxI6lQDuFczRc9Ei2ZSZcfKitCdontDKc3RSAnRPjPqwQvAnjPi\/LukQ84mKa2KGq1ZUkSl7Yix3DvvvXPR1MEbAeniHoZULbZeWswlcgRXTUxNU1RcCmEE1nO4aAlb9bMwLjXQLnSNvoio3YTGm9XwEZqaVuAsDjLwtyl0HrsyZrgFm7R3GbOr8Vlw0hNDvOzUjaJwW4KI2MVLmF0gPQXETVeH8uP8MRVtcHIk7M+sYqy4KFnQgiaOILDxWxyb7ALtCmr4+V0TCjfyaVMpZqU5788xzJyxmfR7MsEgFZ8z6ihH5hBAJnROFBtLDrWknk+gTzSi6SmsuOsnIAx82XCeu7kDW7mKiykhXr8AuSyaGTRtwjJkspj1UnIken\/+\/RPSTWXGavFs0VtvzisOvSdUO2Odk29byoCJjCvuCIjt+6wpoQKeZ2nbvlxBhPxVTFW9VaM6iPuyWEhlyug7oehLjg+Wk+wrcAiw6IqdVBSiSK20lO2YxdjSMk1Yf3Rfn4QSHH4q6nQFcSnqN4rVQ3fn5nLBGNrEy+C21VFlZ7mVG4KDXE5GLe5DrXBNz5At+FXiKz7R+Y5hKXYqC9KdbpHBhMFgxHnEvVKNjWbe6Z0pTgqNTc8YOwFFY+rTSiigFakpDQmhFSBBeZlS61E40fxO446WeGJmq5Wgqhki6e\/bAg+YJDfVFBEpskV5DGi6K4PMWhQzkIeU7oZTnU9LzEcIWV9lZnPB2NDjx5fr12mahczEkFzqUYRo9Ll4sxhrLt\/QbHRnlAJTHkgNzEUddbXX95igA3Qdn6dmfSob4ZonQ3nl8mUqKIPc53QPOqZlhKnplZq7DWawYX4cYakGVMXoWQ3UjO4MiRT8MghNfAuvPw2\/UxzqENSg68xeFrEiQVuoGqIqguhQol0lTm6F9o7U2xhi1ObJTaRlmytuqkdLz6Z8e+wtqJJITofkao6uYfu\/ow8hZVJeCTBoi4O2kN2ZgApoB8CJYK2q7yUCWFQRkRnhJEUubnvBniLm8rBEa\/eLLO04Iv0n5Hql4xtroUp6kYJPWR\/+U0HUF37jUQ6LyLLHDOgDW6mYffqXCs2OoSSzGXqc0yKrIufymNRgafJ1rTZTi7OvvCKtzqucbVlw7D1y9JZUgjjw3ljnPH3soWlU7y1Y3Q3GufSQnuTq+yWq5bAKWokQxF2QJspWoTpet4choZSPedLnQYmZ8+vPhyzxB4bB0UBMialTVYASiHiUTLrt3w5kkBGNp7AU2wLpB1XNeokovaye6XlySS++Z1x0GqqSmLSnJW2h1DO6wDufsi9nS\/X3jm3TR\/gqmUlvIyumIOZCOOl08gpiH0U+pgqjEedynoQaWYGdjGVgUelfF3ywrLRDPe5Ch9rNaV\/LwDQQQrQJcvfPWiS\/ofp86eheOH6Op0oWMEMfGtLKF2L4kRDB\/FkrQTPRwHMsVTXEP\/1oC8E6k1OZCjIcn6AmEgVWQtLcvcdpI+mgxgxK7Ibp521oNIBozJl5bJ0gjbdYkq\/6gaLyKdVRaUWDfSDQS3At9ZqhFpX1ZH0k7AyfxzhXwgGhXb6W+o769zw0jVLc3xJ1D\/nwc2czN7nxNEx7x5KDGPURQMeBYLMIoBlTDlgCtcxujwsDQaVD695WUAyWsAJVNZLDFPSWshCFFrrVV8NwYu+GIfW46ZYFxaopF0iX5i16o2P7ElDvNsiqOoxtDCvSF1QnG+LmIaAIhAqXgiyBKIg8FQvQFam1DNWQ6BdaCUmhlgejTVgbUpvb6H\/+FmCPXGfMTY\/Wwqn9Euu0xH0WgWVXDwubX0Zx72xoSiVR+f0+weeaGUQ7jZoZzsmNWN+Tygq5pMv4VmPGLmQ2K4RDl8uGhRbrrPix90zAVXV1kaDT6AS2wX2MjoFBSFWRFxD2aAkzTRnK\/HcAVFoLelFMCUCRsl8jkduMh9R9IwvJPt1jnn+ZbirCp+HRUkN5RgmMq4Gj+\/sVY6AaWiVF2Ymu96pyyfc+cZGrA7qJEP0iYFjp54AmYmKyO2QmZ7yUfuG2zztO12A3PP6u8mDqe0M8S0rmqCi9hI6sOjZlLaxF257FNB0BjlISjTNCsip0N4rGjPNov3awVDO17uxrb6i25p0dZk\/TM8qw9fZkPttWn5d70zJDV9XOQG3Nc19CUqIKjBhze4Wi5drlm8jbbpmh1TRikl9\/4wW5e8Il21e057YOLq1W1DBzkUvxqBwZwk6Brkr1JoXuRtFYsF2N7fxGFjCNtkThX+kxB5mqEaQzb3L2QMl93dVBdenQk+RK9TltqZmrIqsoWhKu9GkGs+SWWLO9lonu8Da3ICxLWGezc2q5jZ6QJ0xcpVoj98mnMrFrSE9S+0ec3KDpne\/e0CYoYRajcXj9Fu08frPdFHeMbek+Eqcy7YekKoL94O4Gqi4CbN4dCZXEyNVWHlVX\/7BE4rTU1xHjaWvIh7WaZZme1Vpe2sS\/pnT3O6Ed320MDQRoi0gw6BGVzgCm3c5hc5lOj7qcG1FsSHfEuIGAtqrPlgSobpTceMN4GwHWZOzY1vZr6Mjspefsxx5oBq\/3YIOtVmPdJTSrWeiGR\/W1Bx43WUn3wkXk5RZnTze\/e9pKbti7tY4UdyYiCBE+dBqp2dETPo3QZJT9KDTtFhzzb0uz2HoG\/c8uNTCjWd9mp803onao7WTHlrohetpEWDeOrDFXIGwKtZ2T6ltWCq2AWitGVsr2TMDMJ9\/kHjZP8o7ncXzkcFKqvqoFiuBM+rRGMwdYwck9Ed+X9hKjf0xboExrzK4xi3sfv\/XateSBMQuv17b0\/lvKYj8XQkkfaUPvTjHHHZ\/YO+V9mcjtCzNqPFQ3GrNNHn2rmw1iHI5rZnZsnmEkF8\/cw4h0Ygi77YsIE+Fip4EGwgK1A6qUgPHRN9ozn2QSDI1Rh5lHkr+ykCuIwKcqM0z7PaqgFRvDnBxyOkPdfA2N5RPaDx8Vi4p4LNSP+PJqXAUdjIjGIPp9whSxKIAjranGWa5Usg3IVPjuW961Jgnk+gL\/WK2+J1vmkNnNbovg1S4AI\/VE8sKgJEvtYdNlYcH74X66PA6p+s340d3GNvuyQKsNQqSXK6Q1RQIif0c6C4v56OlbQepbyZkrc8+jJ9rIURfTVh\/y9eUus26nnEULZhzu5qCx7xNz\/yQN3pS7Cp6ort09tFr1AidCI3Z5hTOeHLbaKrLE9IvF1ZjsEHyGZw9o0\/FSSDvLPCGyzua8yF0cvlzWnG2ISV791nYPaY1Ltj7tDnimrbkR1L9DGnNaMNGJXWT25nW\/drClGycttoZlMLMLQ0zrCtzF4UYyRZ0Md1fdt\/4hIXZqmQFfup7HeL2RfGCB2NcLbatFE2BX21Z5sOPcMzu2WdrH3b\/v7uBj9HiN1Y42\/s6WciL1EL\/s5siNvwBRf5EuN+VA3BVcfTBGk9Mz\/L7I25vI01+DIK9FHrz3YfsuJ3RrPrQQ7lqoYiSsTC80\/fwNhLa3rLHxxzynmwN+iRUYrOYjadcYfzpvZ4zvKYq\/msVNvDwPmBazzGBj5lloHiYPPnbfk1vLWrl90ZjTzTllLmuXRVRrIOf5G0jqUXmYDuXaliKfrQyCgOe0H2w0DWXFjGeFNhr5ZuKNqwgnBW6C0e3Ftdjga672GbLYdyotf0gmqvF3YZ5TWdn0uZqbEhRh7s\/hi2aovkKYRpuHXzRcJm+mrcrK\/ZhpGGLcW7Zzry4pC3aadf6tQx\/XAe2hJKfJEJcx6Gp\/PaL+Ig8yjz93MSZNULEx7Tru001gGF\/4fzEFeU9yWQE8586rjyt1d76FLIY0S4yH\/5TDPIuarDi9F2R3Rvs\/jLeMT1hosJCz79abup7I5sWJu7jVV83E27fp5M5j8TUXk307oS3ZvKPZcHvRpK1PjBkzMVH0trxzq22pv0jqnPX8Ixt5rDJuyraDMabQy4fzb9qauqKMKKq+s4FXa0N+pUmV2AGrGddeW\/c9pQUT9sebqVb64WgncyBZWOG16T8LqL9Kj1LY355tLWhKaMiGPtUOufb\/0QdKw\/u9w9UKn+cfauP\/k33sJcC87Zdz7vr9GmrFYgZ3\/x\/48YuU18NfeEbX21Cay8fzfyPlv4J0AUy2mPwVfcsvksr6C1bV\/ciP\/MiP\/MiP\/MiP\/MiP\/Mgp+Q+9BTszP\/NePQAAAABJRU5ErkJggg==\">"}]}

How to display comma seperated list into table in EmberJS?

Ok, I have Array [ "1,john", "2,jane", "3,zack" ]
At present it is displayed as
I want to display as
How to to this
My code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
{{#each value in App.testData}}
<td>{{value}}</td>
{{/each}}
</tr>
</table>
</script>
<script type="text/javascript">
var App = Ember.Application.create()
var someArray = [ {
'id':1,
'name':'john'
},{
'id':2,
'name':'jane'
},{
'id':3,
'name':'zack'
}];
App.testData = someArray.map( function( el )
{
return el.id + ',' + el.name;
});
</script>
</body>
</html>

Use someArray instead of testArray and if you have default testArray in your app then you have to convert it to someArray and set it into App
now inside each handlebar use value.id and value.name
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
{{#each value in App.someArray}}
<td>{{value.id}}</td>
<td>{{value.name}}</td>
{{/each}}
</tr>
</table>
</script>
<script type="text/javascript">
var App = Ember.Application.create()
var testData = [ "1,john", "2,jane", "3,zack" ];
App.someArray = testData.map(function(e){
var [id,name] = e.split(",");
return {
id:id,
name:name
}
})
</script>
</body>
</html>

This should be simple by just adding html tags to break to the next line. Also make sure you wrap you handle bars property in three curly braces to make sure that handlebars knows that you are not only passing strings but also html tags. Make sure you check this tutorial on handlebars expressions for deeper details..... I haven't tested but I hope you get the picture...
<script type="text/x-handlebars" data-template-name="index">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thread>
<tbody>
<tr>
{{#each value in App.testData}}
<tr>{{{value}}}</tr>
{{/each}}
</tr>
</tbody>
</table>
</script>
<script type="text/javascript">
var App = Ember.Application.create()
var someArray = [ {
'id':1,
'name':'john'
},{
'id':2,
'name':'jane'
},{
'id':3,
'name':'zack'
}];
App.testData = someArray.map( function( el )
{
return '<td>' + el.id + '</td>' + ',' + '<td>' + el.name + '</td>';
});
</script>

Cannot display result in browser using IMBD api

Data shows in console but cannot display in browser. I almost tried in all browser but same result. row's are creating according to search result but nothing appears inside rows, all rows are blank. Any help will be appreciable.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMDB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="imdb.js"></script>
</head>
<body>
<div class="container">
<h1>Search IMDB</h1>
<input type="text" id="movieTitle" class="form-control" placeholder="Ex: Titanic"/>
<button id="searchMovie" class="btn btn-primary btn-block">Search Movie</button>
<table class="table table-striped" id="results">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Rating</th>
<th>Image</th>
</tr>
</thead>
<tbody id="container">
<tr id="template">
<td></td>
<td class="plot"></td>
<td class="rating"></td>
<td><img src="" class="poster"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
imdb.js
(function(){
$(init);
function init(){
$("#searchMovie").click(searchMovie);
var movieTitle = $("#movieTitle");
var tbody = $("#container");
var template = $("#template").clone();
function searchMovie(){
var title = movieTitle.val();
$.ajax({
url: "http://api.myapifilms.com/imdb/idIMDB?title="+title+"&limit=3&token=1ec543f9-d889-4865-8aab-62a2515f24e8",
dataType: "jsonp",
success: renderMoviesWithTemplate
}
);
function renderMoviesWithTemplate(movies){
console.log(movies);
tbody.empty();
for(var m in movies){
var movie = movies[m];
var title = movie.title;
var plot = movie.plot;
var rating = movie.rating;
var posterUrl = movie.urlPoster;
var movieUrl = movie.urlIMDB;
var tr = template.clone();
tr.find(".link")
.attr("href",movieUrl)
.html(title);
tr.find(".plot")
.html(plot);
tr.find(".rating")
.html(rating);
tr.find(".poster")
.attr("src",posterUrl);
tbody.append(tr);
}
}
}
}
})();

Categories

Resources