Unable to display the JSON data in the dropdown list in html table

Question

I have an HTML table with 4 rows which has Order ID and Product Comments columns disabled and in other columns user can enter the data and submit. When user enters data and clicks on the submit button, I get a JSON object as a return value which I'm iterating and displaying in the table.

I have two road blocks here where help is required.

When the user clicks on the submit button, submitData() function is called where I'm getting jsonData which is iterated and shown in the table, but with my code Product1, Product2 columns which are dropdown lists, are not displaying the data.
Another issue is when the user clicks on the submit button and get the data and shown in the table, I want to make "Product Comments" column as editable(enabled) and all other columns to be in disabled mode.

Code demo : https://plnkr.co/edit/CEAYKI1SGuobosye1Pqk?p=preview

Below is the sample code I tried:

//populate dropdown with the value

function populateSelect() {
  var ids = [{
    "pid": "laptop",
    "des": "laptop"
  }, {
    "pid": "Mobile",
    "des": "Mobile"
  }, {
    "pid": "IPAD mini.",
    "des": "IPAD mini."
  }]
  var productDropdown1 = $(".product1");
  var productDropdown2 = $(".product2");
  $.each(ids, function(index, value) {
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
  });

  $("select").change(function() {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    var descValue = $('input[name="description"]', row).val();
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, descValue);
  });

  $('input[name="description"]').on('input', function(e) {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    console.log("-inut -product1_drop----- " + product1_drop);
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, $(this).val());
  });
}

function validate(prod1, prod2, desc) {
  if (desc && prod1 === prod2) {
    alert('Product1 and Product2 cannot have same value');
  }
}

function submitData() {
  var flag = true;
  if (flag) {
    //after getting the values from backend hide the table1 and show table2
    var jsonData = [{
        "oid": "1023",
        "Product1": "laptop",
        "description": "Silver color",
        "product2": "IPAD Mini",
        "comments": "user comments row1",
        "productComments": "Product comments row1"
      },
      {
        "oid": "1024",
        "Product1": "Mobile",
        "description": "Samsung",
        "product2": "IPAD Mini",
        "comments": "user comments row2",
        "productComments": "product comments row2"
      }
    ];

    //iterate and show the jsonData in the table2 when user click on submit button
    $.each(jsonData, function(key, val) {
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.oid);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(1) select').val(val.product1);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.description);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(3) select').val(val.product2);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(4) input').val(val.comments);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(5) input').val(val.productComments);
    });
  }
}

$(document).ready(function() {
  populateSelect();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table id="productTable" border="1">

  <tr>
    <th>Order ID</th>
    <th>Product1</th>
    <th>Description</th>
    <th>Product2</th>
    <th>Comments</th>
    <th>Product Comments</th>
  </tr>

  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum1" disabled></td>
    <td>
      <select class="product1" id="prod1">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2" id="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum2" disabled></td>
    <td>
      <select class="product1" id="prod2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum3" disabled></td>
    <td>
      <select class="product1" id="prod3">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum4" disabled></td>
    <td>
      <select class="product1" id="prod4">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
</body>

</html>

---Edited---- One more issue i'm facing is if the jsonData i'm getting when user click on submit button has any null value, i want to display the data in the row but show the row with red color and don't want to disable the fields so that user can again enter the data..

example :

   var jsonData = [{
          "oid": "1023", 
          "product1": "laptop",  
          "description": "Silver color",
          "product2": "Mobile", 
          "comments":"user comments row1",
          "productComments":"Product comments row1"
        },
        {
          "oid": null,
          "product1": "Mobile", 
          "description": "Samsung",
          "product2": "laptop",
          "comments":"user comments row2",
          "productComments":"product comments row2"
        } 
      ];

In the above jsonData, the second row value oid is null, so i want to show the second row highlighted with red color and don't disable the fields. and reset/clear all the input which user has entered before the clicking the submit button.

Code i used to reset the user entered values before clicking on submit button:

   $('#productTable input[type="text"]').val('');
   $('.product1').val('');

Updated plunker : https://plnkr.co/edit/aEEFFSndWOpbGHp43bQT?p=preview

Product1 (the name of the property on the object) !== product1 (the name of the property accessed in the val() statement), and "IPAD mini." (one of the values of the dropdowns) !== "IPAD Mini" (the value of the property you're trying to set). — Heretic Monkey
– Heretic Monkey, Commented Nov 27, 2018 at 20:19
I have updated now, but still cannot display the value in the dropdowns..plnkr.co/edit/idI0AN6QDwgnZVQMzkA6?p=preview — user3684675
– user3684675, Commented Nov 27, 2018 at 20:28

Lucas Anschau · Accepted Answer · 2018-11-27 20:39:57Z

1

For product1 it is working correctly. For product2, it is only a grammaticaly error in "product2": "IPAD Mini" what should be "product2": "IPAD Mini." with dot in the end.

To change the enable of the fields:

$('#productTable input, #productTable select').attr("disabled", "disabled");

$('#productTable tr ').each(function(){
    $('td:eq(2) input', this).removeAttr("disabled");
});

answered Nov 27, 2018 at 20:39

Lucas Anschau

911 silver badge9 bronze badges

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

6 Comments

Lucas Anschau Over a year ago

The jQuery.val() is case sensitive. So you need to change "product2": "IPAD mini.".

user3684675 Over a year ago

Thanks for the inputs.It is working as expected. I have one more issue which i forgot to post in the question. If i get the null value for the row to display in the jsonData, i want to show the entire row in red color with data in it and don't want to disable the elements in that row. Inputs would be helpful. Updated Demo : plnkr.co/edit/uR9J85d9SIJifBL5V1WV?p=preview

Lucas Anschau Over a year ago

@user3684675 So jsonData have 2 rows. The last two rows must be in red because it dont have been in jsonData?

user3684675 Over a year ago

When user enters values in first row and 4th row and click on submit button, i'm getting the values from backend which is jsonData which is iterated and shown in the first two rows of the table which is correct. Issue is if the value is null which is shown in jsonData in submitData() for second row oid value as null, then i need to show that second row highlighted with red color and other thing is initially user has entered data in the 3rd row that should be reset/blank, but in my table after user click on submit the previous entered values in 3rd row by the user is still available.

user3684675 Over a year ago

Please see the post edited above..I want to show the red highlighted row when the json return value(jsonData) has null in it . when user clicked on submit button we are getting the json data and if that has null value for any element in the row, that row i want to highlight with red and fields enabled..thanks..@Lucas Anschau

|

Collectives™ on Stack Overflow

Unable to display the JSON data in the dropdown list in html table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related