Jak prawidłowo przekazać parametr do funkcji onlick?

Jak prawidłowo przekazać parametr do funkcji onlick żeby obyło się bez błedów? W powyższym przykładzie wyrzuca mi błąd taki, że data nie jest zdefiniowana.

 function showOnMap(id) {
            console.log("Show on map" + id);
            $("html, body").animate({ scrollTop: $('#map').offset().top }, 800);
        }
 
        function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    $('#tableResults tbody').append(
                        "<tr>" +
                        "<td class='nameCompany'>" +
                        data[i].CompanyName +
                        "<br /><button class='showOnMap' onclick='showOnMap(data[i].Id)'>" +
                        "POKAŻ NA MAPIE" +
                        "</button class='showOnMap'></td>" +
                        "</td>" +
                        "<td class='address'>" +
                        data[i].CompanyAddress +
                        "</td>" +
                        "<td class='phoneNumber'>" +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        "<td class='installationPrice'>" +
                        data[i].PriceInstallation +
                        "</td>" +
                        "</tr>");
                }
            };
        }

<button class='showOnMap' onclick='showOnMap(data[i].Id)'>

A co chciałbyś żeby było w tym data? Bo jak na razie tylko korzystasz z tej zmiennej, ale nigdzie jej nie definiujesz (nie ustalasz jej wartości).

Ale jak to jest w pętli for to nie jest ona zdefiniowana?

Pierwsze primo - od strony HTMLa zmień pojedyncze cudzysłowy na podwójne (tam gdzie nadajesz np. class="showOnMap"). To automatycznie wymusi Ci zamianę w konkatenacji - czyli użycia pojedynczego cudzysłowy z podwójnym.

Następnie wstrzyknij zmienną za pomocą +' tak jak poniżej. Powinno działać.

 '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap(+'data[i].Id+')">';

@hapertown:
Jak już ma dodawać <tr> z jQuery, to już niech to lepiej robi tak:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .addClass('nameCompany')
            .append(data[i].CompanyName)
            .append($('<br>'))
            .append($('<button>')
                .addClass('showOnMap')
                .click(e => showOnMap(data[i].Id))
                .html('POKAŻ NA MAPIE')
            )
        )
        .append($('<td>')
            .addClass('address')
            .append(data[i].CompanyAddress)
        )
        .append($('<td>')
            .addClass('phoneNumber')
            .append(data[i].PhoneNumber)
        )
        .append($('<td>')
            .addClass('installationPrice')
            .append(data[i].PriceInstallation)
        )
    );

Obejdzie się bez sklejania html'a ze stringów

To już jest zupełnie odrębna sprawa - można na pewno zrobić to jeszcze inaczej (czytaj: lepiej) bez takich akcji jak tutaj kolega przedstawił ;)

Zrobiłem tak jak pisał hapertwon:

'<br /><button class="showOnMap" onclick="showOnMap(+ 'data[i].Id +')">' +

i przy (+ 'data[i].Id +') jest napisane, że wymagany jest średnik.

Tak to teraz wygląda:

function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {  
                    $('#tableResults tbody').append(
                        '<tr>' +
                        '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap(+ 'data[i].Id +')">' +
                        "POKAŻ NA MAPIE" +
                        '</button class="showOnMap"></td>' +
                        '</td>' +
                        '<td class="address">' +
                        data[i].CompanyAddress +
                        '</td>' +
                        '<td class="phoneNumber">' +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        '<td class="installationPrice">' +
                        data[i].PriceInstallation +
                        '</td>' +
                        '<td class="reportError">' +
                        "Napis" +
                        '</td>' +
                        '</tr>');

                    /*let j = i;
                    $(".showOnMap").click(function() {
                        showOnMap(data[j]);
                    });*/
                }
            };
        }

W tej linijce też krzyczy, że średnik jest wymagany mimo, że jest.

 '</tr>');

Dzięki TomRiddle za pomoc, Twój kod działa. Jednak zastanawiam się czemu ten zapis, który jest w poście u góry wymagał jeszcze średnika i gdzie jest tam faktycznie błąd.

Błąd jest przy deklarowaniu argumentu funkcji, nie tam postawiłeś średnik gdzie trzeba

function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {  
                    $('#tableResults tbody').append(
                        '<tr>' +
                        '<td class="nameCompany">' +
                        data[i].CompanyName +
                        '<br /><button class="showOnMap" onclick="showOnMap('+(data[i].Id)+')">' +
                        "POKAŻ NA MAPIE" +
                        '</button class="showOnMap"></td>' +
                        '</td>' +
                        '<td class="address">' +
                        data[i].CompanyAddress +
                        '</td>' +
                        '<td class="phoneNumber">' +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        '<td class="installationPrice">' +
                        data[i].PriceInstallation +
                        '</td>' +
                        '<td class="reportError">' +
                        "Napis" +
                        '</td>' +
                        '</tr>');
 
                    /*let j = i;
                    $(".showOnMap").click(function() {
                        showOnMap(data[j]);
                    });*/
                }
            };
        }

@TomRiddle: Coś byśmy jeszcze znaleźli, jakieś sposoby, np. gotowce w jQuery :P

Ten kod ma błąd składniowy

'<br /><button class="showOnMap" onclick="showOnMap(+ 'data[i].Id +')">' +

powinno być:

'<br /><button class="showOnMap" onclick="showOnMap(' + data[i].Id + ')">' +

Wracam do tematu, ponieważ się zastanawiam czemu zawsze jest te same id przekazywane do funkcji? Natomiast jeśli zrobię:

let k = data[i].Id
``` i później tą zmienną k przekazuję do funkcji:
```javascript

                .click(e => showOnMap(data[i].Id))

to jest już ok i nie jest przekazywane te same id do funkcji. To jeśli przekazujemy coś do funkcji w onclicku to ta zmienna jest traktowana tak jakby była tylko raz przypisana na funkcję?