javascript - 使用 javascript 中的条件从 JSON 获取数据

Question

我有一个 JSON，我想使用 javascript 中的条件从 JSON 获取数据。

加载页面时，正在加载产品 HTML table。在那个表中tbody，有一个td有一个id。

在这里我想做如果 JSONproduct_id值等于那个tdsid值打印currency_symbol到那个td. 我在下面提到了我尝试过的代码。

产品 HTML 表：

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

最终输出应该是：

<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>€&lt;/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>€&lt;/td></tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

请帮我解决这个问题。谢谢你。

标签： javascript

Answer 1

将您的代码变成一个工作示例。

主要跟随您的代码。我想知道为什么您不使用车把来执行此操作，因为您已经在使用它了。您的 product_ids 重叠，所以这个逻辑似乎是错误的。我刚刚添加了代码来搜索 id，找到最接近的 tr，然后用你在那里的字符串替换 HTML。

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>