I have a JSON and I want to get data from JSON using conditions in javascript.
When loading the page, the Product HTML table
is loading. In that table tbody
, there is a td
which has an id
.
Here I want to do if JSON product_id
value equals to that td
s id
value print currency_symbol
to that td
. I have mentioned my tried code below.
Products HTML table:
<table id="table" class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>Currencies</th>
</tr>
</thead>
<tbody>
{{#each products}}
<script>
$(document).ready(function(){
insert_items_onload({{id}});
});
</script>
<tr>
<td>{{this.id}}</td>
<td>
<div>
<table class="cur_symbol">
<tbody>
</tbody>
</table>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
Final output should be:
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Currencies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td id='1'>
<div>
<table class="cur_symbol">
<tbody>
<tr><td>€</td></tr>
<tr><td>£</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td id='2'>
<div>
<table class="cur_symbol">
<tbody>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td id='3'>
<div>
<table class="cur_symbol">
<tbody>
<tr><td>$</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>4</td>
<td id='4'>
<div>
<table class="cur_symbol">
<tbody>
<tr><td>€</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Please help me to solve this problem. Thank you.
Turned your code into a working example.
Mostly followed along with your code. I'm wondering why you aren't using handlebars to do this, since you're already using it. Your product_ids overlap, so this logic seems to be faulty. I just added code to search for the id, find the closest tr, and replace the HTML with the string you had there.
comname={}; comname.newCurrency = [{ "id": 1, "product_id": 1, "currency_id": 2, "rate": "1.01", "currency_name": "EUR", "currency_symbol": "€" }, { "id": 2, "product_id": 1, "currency_id": 3, "rate": "1.02", "currency_name": "GBP", "currency_symbol": "£" }, { "id": 3, "product_id": 3, "currency_id": 1, "rate": "1.03", "currency_name": "AUD", "currency_symbol": "$" }, { "id": 4, "product_id": 4, "currency_id": 2, "rate": "1.04", "currency_name": "EUR", "currency_symbol": "€" }]; $(document).ready(function(){ insert_items_onload(); }); function insert_items_onload(){ $('.cur_symbol tr').remove(); comname.newCurrency.forEach( item => insert_items_symbol(item.product_id,item.currency_symbol) ); } function insert_items_symbol(id, currency_symbol){ /* var symbols_table = `<table> <tbody> <tr id="${id}"> <td>${currency_symbol}</td> </tr> </tbody> </table>`;*/ $(`#${id}`).prepend(`<td>${currency_symbol}</td>`); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table" class="table table-striped table-sm"> <thead> <tr> <th>ID</th> <th>Currencies</th> </tr> </thead> <tbody> <script> // don't use this part, just a lazy hack to generate dummy test html [1,3,4,2,5].forEach(id=>document.write(` <tr> <td>${id}</td> <td id="${id}"> <div> <table class="cur_symbol"> <tbody> <tr><td>clearme</td></tr> </tbody> </table> </div> </td> </tr>`)); </script> </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.