Loop via a each but function unknown

Question

I get json value and i loop on rentFeatureOption. This part work.

{
    "bailId": 2,
    "fromDate": "2016-03-11",
    "toDate": null,
    "lodgerId": 1,
    "supportTwoPerson": false,
    "lodgerPayforTwo": false,    
    "roomId": 1,
    "appartmentId": 1,
    "price": 500.0,
    "paymentPeriod": "WEEK",
    "address": "460 Ch. Chambly, Longueuil, 1",
    "rentFeatureOption": [{
        "rentFeatureOptionId": 1,
        "featureOptionId": 2,
        "price": 5.0
    }]
}

I need to loop on a html table

<tbody>
    <tr data-index="0" data-rent-feature-option-id="">
        <td style="" data-feature-option-id="1">Air climatisé
            <input type="hidden" name="rentFeatureOption[0].rentFeatureOptionId" value="">
            <input type="hidden" name="rentFeatureOption[0].featureOptionId" value="1">
        </td>
        <td style="">
            <input type="text" name="rentFeatureOption[0].price" value="">
        </td>
    </tr>
    <tr data-index="1" data-rent-feature-option-id="">
        <td style="" data-feature-option-id="2">Internet
            <input type="hidden" name="rentFeatureOption[1].rentFeatureOptionId" value="">
            <input type="hidden" name="rentFeatureOption[1].featureOptionId" value="2">
        </td>
        <td style="">
            <input type="text" name="rentFeatureOption[1].price" value="">                
        </td>
    </tr>
</tbody>

for (var i = 0; i < data.rentFeatureOption.length; i++) {
    $('#lodgerRentOptionTableResult > tbody  > tr').each(function() {            
        if ($(this).find('td')[0].data("feature-option-id") == data.rentFeatureOption[i].featureOptionId) { 
        }
    });                        
}

On the condition I get this error

Uncaught TypeError: $(...).find(...)[0].data is not a function

Possible duplicate of [Error in event handler: "this.data() is not a function"](https://stackoverflow.com/questions/32212029/error-in-event-handler-this-data-is-not-a-function) — Paul Roub, Aug 14 '17 at 14:27

score 2 · Accepted Answer · answered Mar 14 '16 at 13:58

[0] returns a dom Element. You can use .first() or eq(0) instead.

You could also use a selector once instead of two selectors:

$('#lodgerRentOptionTableResult > tbody  > tr > td:first-of-type').each(function() {            
    if( $(this).data("feature-option-id")==data.rentFeatureOption[i].featureOptionId){

Loop via a each but function unknown

1 Answers1