Passing object from getJSON to outside function?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
-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?
jquery
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
|
show 11 more comments
-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?
jquery
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
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 youJSON.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 ofonclickneeds to be valid JS, embedded in the HTML attribute.
– Jacob
Nov 16 '18 at 22:08
|
show 11 more comments
-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?
jquery
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
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
jquery
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
edited Nov 16 '18 at 22:00
Lithicas
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
asked Nov 16 '18 at 21:47
LithicasLithicas
85231421
85231421
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 youJSON.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 ofonclickneeds to be valid JS, embedded in the HTML attribute.
– Jacob
Nov 16 '18 at 22:08
|
show 11 more comments
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 youJSON.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 ofonclickneeds 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
|
show 11 more comments
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);
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
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
add a comment |
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>answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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);
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
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
add a comment |
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);
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
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
add a comment |
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);
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
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);
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
edited Nov 16 '18 at 22:03
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
answered Nov 16 '18 at 21:57
JacobJacob
57.1k19118195
57.1k19118195
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
add a comment |
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
add a comment |
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>answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
add a comment |
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>answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
add a comment |
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>answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
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>answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
answered Nov 16 '18 at 22:22
TaplarTaplar
18.4k21529
18.4k21529
add a comment |
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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
onclickneeds to be valid JS, embedded in the HTML attribute.– Jacob
Nov 16 '18 at 22:08