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.

You have a script tag that is not properly closed, variables currency_name and rate that are not defined,... You probably want to pass the whole item object to insert_items_symbol, and take those properties from there. These seem quite basic errors, compared to the task you are trying to achieve. Did you debug at all?? — trincot
– trincot, Commented May 5, 2020 at 9:39
Don't use the json tag (and word) in your question. There is no JSON explicitly mentioned, only a JavaScript Object literal. JSON should be reserved for the data exchange format, not for literals in JavaScript code. Read the json tag usage description, especially the part in capitals. — trincot
– trincot, Commented May 5, 2020 at 9:41
@trincot I am totally new to JS and programming. So I tried this task by searching for 2 days. I have no idea further how can I implement this. Here I want to do If JSON product_id equals to the td id. That td should display currency_symbol in a table. That was the thisng I tried there. — user_v12
– user_v12, Commented May 5, 2020 at 9:44
Seems pretty common. Large majority of the posts I've seen are riddled with typos and/or missing code integral to the functioning of the code. You'd think they were testing us or something. — user120242
– user120242, Commented May 5, 2020 at 9:44

user120242 · Accepted Answer · 2020-05-05 11:02:37Z

2

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>

edited May 5, 2020 at 11:02

answered May 5, 2020 at 10:14

user120242

15.3k3 gold badges43 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user120242 Over a year ago

id attribute must be unique. those values overlap. you will either need to use a different attribute name, or rethink your data structure. Also, are the appended tables being different in structure intentional?

user_v12 Over a year ago

I corrected it changing $(#${id}).closest('tr').html(symbols_table); to $(#${id}).closest('td').html(symbols_table);

user120242 Over a year ago

you want to add another td under ,currency_symbol I'm guessing? and you want to prevent duplicates?

user_v12 Over a year ago

the current problem is it shows only one currency. But some should show several currencies. Why is that?

user120242 Over a year ago

because you are overwriting it.

|

Collectives™ on Stack Overflow

Get data from JSON using conditions in javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related