简体   繁体   中英

Get data from JSON using conditions in javascript

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM