Dynamically populate user input corresponding json data with jquery

Question

I have a json data that is like this,

 [
    {
        "metalTypeId": 1,
        "metalTypeName": "copper"
    },
    {
        "metalTypeId": 3,
        "metalTypeName": "steel"
    }
]

My html is structured like this:

 <table id="lineItemTable">
 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>

 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>
 </table>

What I want to do is when the user select one of the options in the dropdown, I want to populate the corresponding json data to the p tag in my td. And my table contains two identical rows.

So for example, if user select copper for the first table row, and select steel for the second table row, the corresponding p will populate text "1" and "3" to the html page. If user do not select both rows, only the row that is selected will populate corresponding data to the p tag.

I am green to jQuery so I wrote some js code but it does not work as expected: the variable that stores the json data is named as jasonData:

$('select').on('change', function (e){

           $.each(jasonData, function(i, v) {
                if (jasonData.metalTypeName == $('select').val()) {
                           $('p').text(v.metalTypeId);
                           return;
                }
           }); //end each()

});  // end on()

By looking at my code I already know one issue, the p and select select both two table row fields, but I do not know how to correctly fix it. The code may have other issues, please advice.

Joseph Marikle · Accepted Answer · 2015-09-04 20:19:54Z

Your code is very close to working. You just need to cache the active select when it triggers the change event so you can reference it later; compare the active object in your each (you were incorrectly referencing the whole array); and use a few selectors to find the right paragraph. However, you may want to consider using something closer to David's answer. It's a bit cleaner than this method.

var jasonData = [
  {
    "metalTypeId": 1,
    "metalTypeName": "copper"
  },
  {
    "metalTypeId": 3,
    "metalTypeName": "steel"
  }
];

$('select').on('change', function (e){
  var selected = this;
  $.each(jasonData, function(i, v) {
    if (v.metalTypeName === selected.value) {
      $(selected).closest('.row_to_clone').find('p').text(v.metalTypeId);
      return;
    }
  }); //end each()
});  // end on()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lineItemTable">
 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>

 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>
 </table>

David Castro · Accepted Answer · 2015-09-04 20:14:42Z

0

I really recommend you not to use selectors so general such as "select" and "p"; while you are expanding your code, you'll get into issues because of these so generalized; I recommend you using some classes to help you or ID's. Also, if you can change the structure of that JSON you won't need to do that each, basically you're forcing a O(n) problem there when you can something easier. Here's an example I wrote for you doing the functionality that you want

http://jsfiddle.net/6v4zzgjj/

Now, if you want to make the selection of the results easier you can try the following

//Rename this variable better IE jsonData;
var jasonData = {"copper": { "metalTypeId": 1,"metalTypeName": "copper"}, "steel": {"metalTypeId": 3,"metalTypeName": "steel"}};
//Now the selector could be something like
$('.metalSelector').on('change', function (e){
     var value = $(this).val();
     $('#result').text(jasonData[value].metalTypeId);
});

That easy!

answered Sep 4, 2015 at 20:14

David Castro

7384 silver badges7 bronze badges

1 Comment

OPK Over a year ago

I tried your code but seems it only works with one table row? I want both rows working tho.

Collectives™ on Stack Overflow

Dynamically populate user input corresponding json data with jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related