1

I have problems with my JS, when I open console, it shows Uncaught TypeError: Cannot read property 'name' of undefined but when I console.log(id) it display the right id. Can anyone teach where my mistakes are? :/

HTML modal:-

@foreach($category->items as $item)
     <a onClick="setCurrentItem({{ $item->id }}, {{$itemAvailability}},
     {{$maxItem}})" href="javascript:void(0)"><img src="{{ $item->logom }}"
     loading="lazy" data-src="{{ config('global.restorant_details_image') }}
     data-toggle="modal" class="img-fluid lazy" alt="" data-target="#variantModal"></a>
@endforeach

Few lines for modal display:-

<div class="modal fade" id="variantModal" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalTitle">Select your options</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
     </div>
  </div>
</div>

JS:-

var items=[];
var currentItem=null;

function setCurrentItem(id,itemAvailability, maxItem){
    var disable_add_cart = false;
    
     $("#disable_add_cart").show();

    if(itemAvailability=='0'){
        $("#disable_add_cart").hide();
    }
    
    var item=items[id];
    currentItem=item;
    previouslySelected=[];
    console.log('id', item);
    $('#modalTitle').text(item.name);
    $('#modalName').text(item.name);
    $('#modalPrice').html(item.price);
    $('#modalID').text(item.id);
    }
cdogol
  • 155
  • 11
  • 1
    Show output of `item` . – Swati Jun 17 '21 at 05:24
  • Hi @Swati `console.log('output', item)` will execute `output undefined` :/ – cdogol Jun 17 '21 at 05:31
  • Then, error is correct `.name` is undefined. I don't see in your code i.e : how you are adding values inside your `items` array . You have just shown `var items=[];` . – Swati Jun 17 '21 at 05:34
  • `var item = items[id]` does not actually adding values inside the items? – cdogol Jun 17 '21 at 05:35
  • No , please show code where you are assigning value inside your array i.e `name,id`..etc. – Swati Jun 17 '21 at 05:49
  • Sorry, but I don't really understand with JS, I thought by using foreach on my HTML and put it on my JS means that I can pull the data from there. Can you explain to me on how i suppose to do for that? – cdogol Jun 17 '21 at 05:54
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233870/discussion-between-swati-and-cdogol). – Swati Jun 17 '21 at 06:07

1 Answers1

1

Try something like this:

@foreach($category->items as $item)
     <a onClick="() => setCurrentItem({$item}, {$itemAvailability},
     {$maxItem})" href="javascript:void(0)"><img src="{{ $item->logom }}"
     loading="lazy" data-src="{{ config('global.restorant_details_image') }}
     data-toggle="modal" class="img-fluid lazy" alt="" data-target="#variantModal"></a>
@endforeach

And then in your JS:

var currentItem=null;
function setCurrentItem(item, itemAvailability, maxItem){
    var disable_add_cart = false;
    
     $("#disable_add_cart").show();

    if(itemAvailability=='0'){
        $("#disable_add_cart").hide();
    }
    
    currentItem=item;
    previouslySelected=[];
    console.log('id', item.id);
    $('#modalTitle').text(item.name);
    $('#modalName').text(item.name);
    $('#modalPrice').html(item.price);
    $('#modalID').text(item.id);
}

You might have to play with the formatting in the foreach a bit - I'm not sure what language / framework that is, so I'm not entirely sure on the syntax, but the bottom line is that you should pass the full object in the onclick if possible.

Your items array in your example is never getting populated - the JS variables are not connected to the HTML like that.

If this doesn't work for you, please provide more details on the languages / frameworks you are using.

Amanda
  • 63
  • 5
  • Hey, thanks for your help! It works, but there will be a problem with my if condition. Suppose if = 1, my modal will display an input for qty but after changing the code, it doesn't work anymore. I am using Laravel 8. – cdogol Jun 17 '21 at 07:21