How do I avoid the following error when trying to take data from an AJAX call and plug it into another function when I click the submit button?
The console.log call in the ajax function shows that the data is grabbed and I'd hoped then stored in json_data.
The aim was then to use this data to alter a string submitted through an HTML form.
The error is then returned at the line in the 'click' function:
console.log(json_data.length);
<title>Test Form</title>
<script type="text/javascript" src=""></script>
<style>
#results_box {
border: red 5px solid;
}
#place {
border: #cccccc 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var json_source = "";
var string_data ="";
var json_data = $.ajax({
dataType: 'jsonp',
url: json_source,
success: function(data){
var data_obj = [];
for (i=0; i<data.feed.entry.length; i++){
var el = {'key': data.feed.entry[i].title['$t'], 'value': '<p><a href="'+data.feed.entry[i].content['$t']+'>'+data.feed.entry[i].title['$t']+'</a></p>'};
data_obj.push(el)};
console.log("data grabbed");
return data_obj;
},
error: function(jqXHR, textStatus, errorThrown){
$('#results_box').html('<h2>Something went wrong!</h2><p><b>' + textStatus + '</b> ' + errorThrown + '</p>');
}
});
$(':submit').click(function(event, json_data){
event.preventDefault();
console.log(json_data.length);
//function
if ($('#place').val() !=''){
var copy_string = $('#place').val();
var converted_string = copy_string;
for (i=0; i<json_data.length; i++){
//console_log(data.feed.entry[i].title['$t']);
converted_string = converted_string.replace(json_data.feed.entry[i].title['$t'],
'<a href="'+json_data.feed.entry[i].content['$t']+'>'+json_data.feed.entry[i].title['$t']+'</a>');
}
$('#results_box').text(converted_string).html();
}
});
});//document ready end
</script>
</head>
<body>
<div id="wrapper">
<div id="query_box" class="panel">
<form id="form_submit"><h4>Copy to process:</h4>
<textarea id="place"></textarea>
<input type="submit" value="Go" />
</form>
</div>
<div id="results_box" >Results will appear here</div>
</div>
4 Answers
You are not passing the variable correctly. One fast solution is to make a global variable like this:
var global_json_data;
$(document).ready(function() {
var json_source = "";
var string_data ="";
var json_data = $.ajax({
dataType: 'json', // Return JSON
url: json_source,
success: function(data){
var data_obj = [];
for (i=0; i<data.feed.entry.length; i++){
var el = {'key': data.feed.entry[i].title['$t'], 'value': '<p><a href="'+data.feed.entry[i].content['$t']+'>'+data.feed.entry[i].title['$t']+'</a></p>'};
data_obj.push(el)};
console.log("data grabbed");
global_json_data = data_obj;
return data_obj;
},
error: function(jqXHR, textStatus, errorThrown){
$('#results_box').html('<h2>Something went wrong!</h2><p><b>' + textStatus + '</b> ' + errorThrown + '</p>');
}
});
$(':submit').click(function(event){
var json_data = global_json_data;
event.preventDefault();
console.log(json_data.length);
//function
if ($('#place').val() !=''){
var copy_string = $('#place').val();
var converted_string = copy_string;
for (i=0; i<json_data.length; i++){
//console_log(data.feed.entry[i].title['$t']);
converted_string = converted_string.replace(json_data.feed.entry[i].title['$t'],
'<a href="'+json_data.feed.entry[i].content['$t']+'>'+json_data.feed.entry[i].title['$t']+'</a>');
}
$('#results_box').text(converted_string).html();
}
});
});//document ready end
console.log(typeof json_data !== 'undefined'
? json_data.length : 'There is no spoon.');
...or more simply...
console.log(json_data ? json_data.length : 'json_data is null or undefined');
You are accessing an object that is not defined.
The solution is check for null or undefined (to see whether the object exists) and only then iterate.
"ProjectID" JSON data format problem Remove "ProjectID": This value collection objeckt key value
{ * * "ProjectID" * * : {
"name": "ProjectID",
"value": "16,36,8,7",
"group": "Genel",
"editor": {
"type": "combobox",
"options": {
"url": "..\/jsonEntityVarServices\/?id=6&task=7",
"valueField": "value",
"textField": "text",
"multiple": "true"
}
},
"id": "14",
"entityVarID": "16",
"EVarMemID": "47"
}
}
