Menu
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="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
#results_box {
border: red 5px solid;
}
#place {
border: #cccccc 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var json_source = "https://spreadsheets.google.com/feeds/list/0ApL1zT2P00q5dG1wOUMzSlNVV3VRV2pwQ2Fnbmt3M0E/od7/public/basic?alt=json";
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>
567
TypeError: Cannot read property 'length' of undefined. TypeError is a subset of JavaScript Error that is thrown when code attempts to do something that does not exist on the target object. This message indicates that our code expects to have an object with a length property, but that object was not present.
The "Cannot read property 'toString' of undefined" error occurs when the toString() method is called on an undefined value. To solve the error, make sure to only call the toString method on data types that support it.
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 = "https://spreadsheets.google.com/feeds/list/0ApL1zT2P00q5dG1wOUMzSlNVV3VRV2pwQ2Fnbmt3M0E/od7/public/basic?alt=json";
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.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
