Passing object from getJSON to outside function?












-1















I'm trying to pass the object "value" to the "hello()" function, but I get the following error:




SyntaxError: missing ] after element list note: [ opened at line 1,
column 6




My code:



$(document).ready(function(){
$.getJSON("http://localhost:8080/api/users/all", function(result){
$.each(result, function(key,value) {
$("#data").append(
'<li class="list-group-item">' +
value.name +
'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>' +
'<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>' +
'</li>');
});
});
});

function hello(value) {
console.log("hello" + value.name);
}


Anything I'm doing wrong here?










share|improve this question




















  • 1





    What is an example value?

    – Taplar
    Nov 16 '18 at 21:49











  • You are getting a syntax error! Your json object is missing a comma or closing bracket

    – wahwahwah
    Nov 16 '18 at 21:50











  • If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

    – Taplar
    Nov 16 '18 at 21:52











  • @Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

    – Lithicas
    Nov 16 '18 at 21:52






  • 1





    @Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

    – Jacob
    Nov 16 '18 at 22:08
















-1















I'm trying to pass the object "value" to the "hello()" function, but I get the following error:




SyntaxError: missing ] after element list note: [ opened at line 1,
column 6




My code:



$(document).ready(function(){
$.getJSON("http://localhost:8080/api/users/all", function(result){
$.each(result, function(key,value) {
$("#data").append(
'<li class="list-group-item">' +
value.name +
'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>' +
'<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>' +
'</li>');
});
});
});

function hello(value) {
console.log("hello" + value.name);
}


Anything I'm doing wrong here?










share|improve this question




















  • 1





    What is an example value?

    – Taplar
    Nov 16 '18 at 21:49











  • You are getting a syntax error! Your json object is missing a comma or closing bracket

    – wahwahwah
    Nov 16 '18 at 21:50











  • If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

    – Taplar
    Nov 16 '18 at 21:52











  • @Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

    – Lithicas
    Nov 16 '18 at 21:52






  • 1





    @Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

    – Jacob
    Nov 16 '18 at 22:08














-1












-1








-1








I'm trying to pass the object "value" to the "hello()" function, but I get the following error:




SyntaxError: missing ] after element list note: [ opened at line 1,
column 6




My code:



$(document).ready(function(){
$.getJSON("http://localhost:8080/api/users/all", function(result){
$.each(result, function(key,value) {
$("#data").append(
'<li class="list-group-item">' +
value.name +
'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>' +
'<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>' +
'</li>');
});
});
});

function hello(value) {
console.log("hello" + value.name);
}


Anything I'm doing wrong here?










share|improve this question
















I'm trying to pass the object "value" to the "hello()" function, but I get the following error:




SyntaxError: missing ] after element list note: [ opened at line 1,
column 6




My code:



$(document).ready(function(){
$.getJSON("http://localhost:8080/api/users/all", function(result){
$.each(result, function(key,value) {
$("#data").append(
'<li class="list-group-item">' +
value.name +
'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>' +
'<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>' +
'</li>');
});
});
});

function hello(value) {
console.log("hello" + value.name);
}


Anything I'm doing wrong here?







jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 22:00







Lithicas

















asked Nov 16 '18 at 21:47









LithicasLithicas

75711118




75711118








  • 1





    What is an example value?

    – Taplar
    Nov 16 '18 at 21:49











  • You are getting a syntax error! Your json object is missing a comma or closing bracket

    – wahwahwah
    Nov 16 '18 at 21:50











  • If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

    – Taplar
    Nov 16 '18 at 21:52











  • @Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

    – Lithicas
    Nov 16 '18 at 21:52






  • 1





    @Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

    – Jacob
    Nov 16 '18 at 22:08














  • 1





    What is an example value?

    – Taplar
    Nov 16 '18 at 21:49











  • You are getting a syntax error! Your json object is missing a comma or closing bracket

    – wahwahwah
    Nov 16 '18 at 21:50











  • If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

    – Taplar
    Nov 16 '18 at 21:52











  • @Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

    – Lithicas
    Nov 16 '18 at 21:52






  • 1





    @Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

    – Jacob
    Nov 16 '18 at 22:08








1




1





What is an example value?

– Taplar
Nov 16 '18 at 21:49





What is an example value?

– Taplar
Nov 16 '18 at 21:49













You are getting a syntax error! Your json object is missing a comma or closing bracket

– wahwahwah
Nov 16 '18 at 21:50





You are getting a syntax error! Your json object is missing a comma or closing bracket

– wahwahwah
Nov 16 '18 at 21:50













If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

– Taplar
Nov 16 '18 at 21:52





If value is an object, if you are going to stick with inline bindings like that (you should really reconsider), I would suggest you JSON.stringify(value) for the onclick. You're creating a text string. There are no objects in a text string.

– Taplar
Nov 16 '18 at 21:52













@Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

– Lithicas
Nov 16 '18 at 21:52





@Taplar The object just contains and id and a name. Let's say ID: 1, Name: 'Fred'.

– Lithicas
Nov 16 '18 at 21:52




1




1





@Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

– Jacob
Nov 16 '18 at 22:08





@Lithicas: You'd have to surround the argument in quotes. The contents of onclick needs to be valid JS, embedded in the HTML attribute.

– Jacob
Nov 16 '18 at 22:08












2 Answers
2






active

oldest

votes


















0














You are trying to append an object to a string:



'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'


...which causes toString to be called on the object, which usually converts to:



[Object object]


...hence the syntax error, because your onclick will now be:



hello([Object object])


...which is a syntax error.



You probably meant to do + JSON.stringify(value) +.



An even better approach would be to not create the click handler through string manipulation:



const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
euclideanLink.click(e => {
e.preventDefault();
hello(value.name);
return false;
});
const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

const listItem = $('<li class="list-group-item"/>');
listItem.append(value.name, euclideanLink, recommendsLink);

$("#data").append(listItem);





share|improve this answer


























  • This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

    – Lithicas
    Nov 16 '18 at 21:59











  • Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

    – Jacob
    Nov 16 '18 at 22:04



















0














I would highly suggest you separate your markup from your javascript, and dynamically bind your event handler to the link, so you don't have to worry about converting it to a string or anything.






//$(document).ready(function() {
// $.getJSON("http://localhost:8080/api/users/all", function(result) {

//fake out some results so we can see the logic in action
var result = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'Jim' }
];

//get the html from the template on the page so we don't have to put
//it in the script
var userTemplate = $('#userTemplate').html();

$('#data').append(
//create an array of all the elements to add to the data
//doing this lets us append once, reducing the number of times we
//touch the DOM
$.map(result, function(value){
//replace the {{name}} in the template with our real name
var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

//find the first link and bind the click handler to it
$newUser.find('.view-euclidean').on('click', function(){
hello(value);
});

return $newUser;
})
);
// });
//});

function hello(value) {
console.log("hello" + value.name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="data"></div>

<script type="text/html" id="userTemplate">
<li class="list-group-item">
{{name}}

<a class="btn btn-light float-right view-euclidean" role="button">
View Euclidean
</a>

<a class="btn btn-dark float-right mr-1 text-light" role="button">
View Recommendations
</a>
</li>
</script>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345878%2fpassing-object-from-getjson-to-outside-function%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    You are trying to append an object to a string:



    '<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'


    ...which causes toString to be called on the object, which usually converts to:



    [Object object]


    ...hence the syntax error, because your onclick will now be:



    hello([Object object])


    ...which is a syntax error.



    You probably meant to do + JSON.stringify(value) +.



    An even better approach would be to not create the click handler through string manipulation:



    const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
    euclideanLink.click(e => {
    e.preventDefault();
    hello(value.name);
    return false;
    });
    const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

    const listItem = $('<li class="list-group-item"/>');
    listItem.append(value.name, euclideanLink, recommendsLink);

    $("#data").append(listItem);





    share|improve this answer


























    • This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

      – Lithicas
      Nov 16 '18 at 21:59











    • Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

      – Jacob
      Nov 16 '18 at 22:04
















    0














    You are trying to append an object to a string:



    '<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'


    ...which causes toString to be called on the object, which usually converts to:



    [Object object]


    ...hence the syntax error, because your onclick will now be:



    hello([Object object])


    ...which is a syntax error.



    You probably meant to do + JSON.stringify(value) +.



    An even better approach would be to not create the click handler through string manipulation:



    const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
    euclideanLink.click(e => {
    e.preventDefault();
    hello(value.name);
    return false;
    });
    const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

    const listItem = $('<li class="list-group-item"/>');
    listItem.append(value.name, euclideanLink, recommendsLink);

    $("#data").append(listItem);





    share|improve this answer


























    • This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

      – Lithicas
      Nov 16 '18 at 21:59











    • Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

      – Jacob
      Nov 16 '18 at 22:04














    0












    0








    0







    You are trying to append an object to a string:



    '<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'


    ...which causes toString to be called on the object, which usually converts to:



    [Object object]


    ...hence the syntax error, because your onclick will now be:



    hello([Object object])


    ...which is a syntax error.



    You probably meant to do + JSON.stringify(value) +.



    An even better approach would be to not create the click handler through string manipulation:



    const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
    euclideanLink.click(e => {
    e.preventDefault();
    hello(value.name);
    return false;
    });
    const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

    const listItem = $('<li class="list-group-item"/>');
    listItem.append(value.name, euclideanLink, recommendsLink);

    $("#data").append(listItem);





    share|improve this answer















    You are trying to append an object to a string:



    '<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'


    ...which causes toString to be called on the object, which usually converts to:



    [Object object]


    ...hence the syntax error, because your onclick will now be:



    hello([Object object])


    ...which is a syntax error.



    You probably meant to do + JSON.stringify(value) +.



    An even better approach would be to not create the click handler through string manipulation:



    const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
    euclideanLink.click(e => {
    e.preventDefault();
    hello(value.name);
    return false;
    });
    const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

    const listItem = $('<li class="list-group-item"/>');
    listItem.append(value.name, euclideanLink, recommendsLink);

    $("#data").append(listItem);






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 16 '18 at 22:03

























    answered Nov 16 '18 at 21:57









    JacobJacob

    56.5k19114190




    56.5k19114190













    • This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

      – Lithicas
      Nov 16 '18 at 21:59











    • Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

      – Jacob
      Nov 16 '18 at 22:04



















    • This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

      – Lithicas
      Nov 16 '18 at 21:59











    • Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

      – Jacob
      Nov 16 '18 at 22:04

















    This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

    – Lithicas
    Nov 16 '18 at 21:59





    This doesn't work, I get ReferenceError: Lisa is not defined where Lisa is the name

    – Lithicas
    Nov 16 '18 at 21:59













    Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

    – Jacob
    Nov 16 '18 at 22:04





    Yeah, you'll want to pass the serialized object, then. Or see my edit for a way to do the click handler without stuffing it in a string.

    – Jacob
    Nov 16 '18 at 22:04













    0














    I would highly suggest you separate your markup from your javascript, and dynamically bind your event handler to the link, so you don't have to worry about converting it to a string or anything.






    //$(document).ready(function() {
    // $.getJSON("http://localhost:8080/api/users/all", function(result) {

    //fake out some results so we can see the logic in action
    var result = [
    { id: 1, name: 'Jane' },
    { id: 2, name: 'Jim' }
    ];

    //get the html from the template on the page so we don't have to put
    //it in the script
    var userTemplate = $('#userTemplate').html();

    $('#data').append(
    //create an array of all the elements to add to the data
    //doing this lets us append once, reducing the number of times we
    //touch the DOM
    $.map(result, function(value){
    //replace the {{name}} in the template with our real name
    var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

    //find the first link and bind the click handler to it
    $newUser.find('.view-euclidean').on('click', function(){
    hello(value);
    });

    return $newUser;
    })
    );
    // });
    //});

    function hello(value) {
    console.log("hello" + value.name);
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="data"></div>

    <script type="text/html" id="userTemplate">
    <li class="list-group-item">
    {{name}}

    <a class="btn btn-light float-right view-euclidean" role="button">
    View Euclidean
    </a>

    <a class="btn btn-dark float-right mr-1 text-light" role="button">
    View Recommendations
    </a>
    </li>
    </script>








    share|improve this answer




























      0














      I would highly suggest you separate your markup from your javascript, and dynamically bind your event handler to the link, so you don't have to worry about converting it to a string or anything.






      //$(document).ready(function() {
      // $.getJSON("http://localhost:8080/api/users/all", function(result) {

      //fake out some results so we can see the logic in action
      var result = [
      { id: 1, name: 'Jane' },
      { id: 2, name: 'Jim' }
      ];

      //get the html from the template on the page so we don't have to put
      //it in the script
      var userTemplate = $('#userTemplate').html();

      $('#data').append(
      //create an array of all the elements to add to the data
      //doing this lets us append once, reducing the number of times we
      //touch the DOM
      $.map(result, function(value){
      //replace the {{name}} in the template with our real name
      var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

      //find the first link and bind the click handler to it
      $newUser.find('.view-euclidean').on('click', function(){
      hello(value);
      });

      return $newUser;
      })
      );
      // });
      //});

      function hello(value) {
      console.log("hello" + value.name);
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div id="data"></div>

      <script type="text/html" id="userTemplate">
      <li class="list-group-item">
      {{name}}

      <a class="btn btn-light float-right view-euclidean" role="button">
      View Euclidean
      </a>

      <a class="btn btn-dark float-right mr-1 text-light" role="button">
      View Recommendations
      </a>
      </li>
      </script>








      share|improve this answer


























        0












        0








        0







        I would highly suggest you separate your markup from your javascript, and dynamically bind your event handler to the link, so you don't have to worry about converting it to a string or anything.






        //$(document).ready(function() {
        // $.getJSON("http://localhost:8080/api/users/all", function(result) {

        //fake out some results so we can see the logic in action
        var result = [
        { id: 1, name: 'Jane' },
        { id: 2, name: 'Jim' }
        ];

        //get the html from the template on the page so we don't have to put
        //it in the script
        var userTemplate = $('#userTemplate').html();

        $('#data').append(
        //create an array of all the elements to add to the data
        //doing this lets us append once, reducing the number of times we
        //touch the DOM
        $.map(result, function(value){
        //replace the {{name}} in the template with our real name
        var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

        //find the first link and bind the click handler to it
        $newUser.find('.view-euclidean').on('click', function(){
        hello(value);
        });

        return $newUser;
        })
        );
        // });
        //});

        function hello(value) {
        console.log("hello" + value.name);
        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div id="data"></div>

        <script type="text/html" id="userTemplate">
        <li class="list-group-item">
        {{name}}

        <a class="btn btn-light float-right view-euclidean" role="button">
        View Euclidean
        </a>

        <a class="btn btn-dark float-right mr-1 text-light" role="button">
        View Recommendations
        </a>
        </li>
        </script>








        share|improve this answer













        I would highly suggest you separate your markup from your javascript, and dynamically bind your event handler to the link, so you don't have to worry about converting it to a string or anything.






        //$(document).ready(function() {
        // $.getJSON("http://localhost:8080/api/users/all", function(result) {

        //fake out some results so we can see the logic in action
        var result = [
        { id: 1, name: 'Jane' },
        { id: 2, name: 'Jim' }
        ];

        //get the html from the template on the page so we don't have to put
        //it in the script
        var userTemplate = $('#userTemplate').html();

        $('#data').append(
        //create an array of all the elements to add to the data
        //doing this lets us append once, reducing the number of times we
        //touch the DOM
        $.map(result, function(value){
        //replace the {{name}} in the template with our real name
        var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

        //find the first link and bind the click handler to it
        $newUser.find('.view-euclidean').on('click', function(){
        hello(value);
        });

        return $newUser;
        })
        );
        // });
        //});

        function hello(value) {
        console.log("hello" + value.name);
        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div id="data"></div>

        <script type="text/html" id="userTemplate">
        <li class="list-group-item">
        {{name}}

        <a class="btn btn-light float-right view-euclidean" role="button">
        View Euclidean
        </a>

        <a class="btn btn-dark float-right mr-1 text-light" role="button">
        View Recommendations
        </a>
        </li>
        </script>








        //$(document).ready(function() {
        // $.getJSON("http://localhost:8080/api/users/all", function(result) {

        //fake out some results so we can see the logic in action
        var result = [
        { id: 1, name: 'Jane' },
        { id: 2, name: 'Jim' }
        ];

        //get the html from the template on the page so we don't have to put
        //it in the script
        var userTemplate = $('#userTemplate').html();

        $('#data').append(
        //create an array of all the elements to add to the data
        //doing this lets us append once, reducing the number of times we
        //touch the DOM
        $.map(result, function(value){
        //replace the {{name}} in the template with our real name
        var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

        //find the first link and bind the click handler to it
        $newUser.find('.view-euclidean').on('click', function(){
        hello(value);
        });

        return $newUser;
        })
        );
        // });
        //});

        function hello(value) {
        console.log("hello" + value.name);
        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div id="data"></div>

        <script type="text/html" id="userTemplate">
        <li class="list-group-item">
        {{name}}

        <a class="btn btn-light float-right view-euclidean" role="button">
        View Euclidean
        </a>

        <a class="btn btn-dark float-right mr-1 text-light" role="button">
        View Recommendations
        </a>
        </li>
        </script>





        //$(document).ready(function() {
        // $.getJSON("http://localhost:8080/api/users/all", function(result) {

        //fake out some results so we can see the logic in action
        var result = [
        { id: 1, name: 'Jane' },
        { id: 2, name: 'Jim' }
        ];

        //get the html from the template on the page so we don't have to put
        //it in the script
        var userTemplate = $('#userTemplate').html();

        $('#data').append(
        //create an array of all the elements to add to the data
        //doing this lets us append once, reducing the number of times we
        //touch the DOM
        $.map(result, function(value){
        //replace the {{name}} in the template with our real name
        var $newUser = $(userTemplate.replace(/{{name}}/, value.name));

        //find the first link and bind the click handler to it
        $newUser.find('.view-euclidean').on('click', function(){
        hello(value);
        });

        return $newUser;
        })
        );
        // });
        //});

        function hello(value) {
        console.log("hello" + value.name);
        }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div id="data"></div>

        <script type="text/html" id="userTemplate">
        <li class="list-group-item">
        {{name}}

        <a class="btn btn-light float-right view-euclidean" role="button">
        View Euclidean
        </a>

        <a class="btn btn-dark float-right mr-1 text-light" role="button">
        View Recommendations
        </a>
        </li>
        </script>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 16 '18 at 22:22









        TaplarTaplar

        16k21529




        16k21529






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345878%2fpassing-object-from-getjson-to-outside-function%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()