Acess local scope

I need access the reservas inside the PUT request to send to the url /datas. Anyone knows how?

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
    <style type="text/css">
        .starter-template {
            margin-top: 150px;
        }

        .checkbox {
            width: 40px;
        }
    </style>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-  collapse">
                <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#">Banco de dados</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">Cadastros</a></li>
                    <li><a href="datas">Datas</a></li>
                </ul>
            </div> <!--/.nav-collapse -->
        </div>
    </div>
    <div class="container">
    <div class="starter-template">
        <table class="table">
            <thead>
                <tr>
                    <th>✓</th>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Email</th>
                </tr>
                <div id="checkbox"></div>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </div>

<script>

$.ajax({
    type: 'GET',
    //async: false,
    url: 'https://app.myurl.com/reservas',
    success:function(reservas){

        reservas.forEach (function (reserva) {
            var reservas = [];


            reservas.push('<tr class="reservas">');
            reservas.push('<td> <input type="checkbox" id="salvar"/> </td>');
            reservas.push('<td>' + reserva._id + '</td>');
            reservas.push('<td>' + reserva.nome + '</td>');
            reservas.push('<td>' + reserva.email + '</td>');
            reservas.push('</tr>');

            $('tbody').append(reservas.join(""));

        })
    },
    error:function(e){
        console.log(e);
    }
});

And them i have the PUT request inside the click event.

$(function(){
    $('body').on('click', '#salvar', function(){
       alert('Salvo!');

       $.ajax({

            type: 'PUT',
            url: 'http://localhost/datas',
            //async: false,
            data: {
                id: reserva._id,
                nome: reserva.nome,
                email: reserva.email
            },
            sucess:function (success) {
                console.log('success')
            },
            error:function(err) {
                console.log(err);
            }
        });
    });
});






</script>

if you can direct me, I appreciate it =)

Thanks a lot.

Solution

You don't need a global variable here as there are many potential reserva being returned by the GET however you can declare a variable as global by declaring it outside of any other functions and code somewhere before your GET like this:

var myGlobalReserva;
// Then all your other code here.

What you want to actually do I am guessing it the following, use "data-attributes" http://api.jquery.com/data/ to store the relevant data on a particular "reserva" which you then append to the DOM. Note that it is not valid to have more than 1 element with the same ID so I have changed it to class="salvar". Then in the "PUT" you would get the data-attributes values.

$.ajax({
    type: 'GET',
    //async: false,
    url: 'https://app.myurl.com/reservas',
    success:function(reservas){

        reservas.forEach (function (reserva) {
            var reservasHTML = [];


            reservasHTML.push('<tr class="reservas">');
            reservasHTML.push('<td> <input type="checkbox" class="salvar" data-id="' + reserva._id + '" data-nome="' + reserva.nome + '" data-email="' + reserva.email + '"/> </td>');
            reservasHTML.push('<td>' + reserva._id + '</td>');
            reservasHTML.push('<td>' + reserva.nome + '</td>');
            reservasHTML.push('<td>' + reserva.email + '</td>');
            reservasHTML.push('</tr>');

            $('tbody').append(reservas.join(""));

        })
    },
    error:function(e){
        console.log(e);
    }
});


$(function(){
    $('body').on('click', '.salvar', function(){
       alert('Salvo!');
       var clickedBox = $(this);

       $.ajax({

            type: 'PUT',
            url: 'http://localhost/datas',
            //async: false,
            data: {
                id: clickedBox.data('id'),
                nome: clickedBox.data('nome'),
                email: clickedBox.data('email')
            },
            sucess:function (success) {
                console.log('success')
            },
            error:function(err) {
                console.log(err);
            }
        });
    });
});