Get data from JSON using conditions in javascript

Question

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 tds 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.

Answer 1

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>