Develop Reference

how to identify multiple arrays in a JSON response

I'm pretty sure response.model.model_to_return is wrong, I try to display on screen the content of the array but my JS structure might be wrong.
JS:
<script>
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: 'GET',
url: "/trafic",
success: function check(response) {
//CODE WORKSPACE //
console.log(response);
$("#variat").empty();
for (var model of response.model.memory_return) {
}
//CODE checkview //
console.log(response);
$("#display").empty();
for (var model of response.model.models_to_return) {
}
},
error: function(response){
//alert('An error occured')
}
});
}, 10000)
})
</script>
Python view:
def trafic(request):
user_msg = request.user
get_Messages = Message.objects.filter(user=user_msg).values()
allm = get_Messages.all()
get_Memory = Memory.objects.filter(user=user_msg).values()
allm2 = get_Memory.all()
c = {"models_to_return": list(allm)}
d = {"memory_return": list(allm2)}
return JsonResponse([c, d], safe = False)
JS error:
Uncaught TypeError: Cannot read properties of undefined (reading 'memory_return')
at Object.check [as success] ((index):613:44)
at i (jquery-3.1.1.min.js:2:27983)
at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2:28749)
at A (jquery-3.1.1.min.js:4:14203)
at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4:16491)

How to fix Uncaught SyntaxError: Unexpected token I in JSON?

I have a js code (in index.php) as shown below which makes an ajax call to save.php file.
<script>
$(function () {
$('form').submit(function (e) {
e.preventDefault();
$.post({
url: 'save.php',
data: $(this).serialize(),
}).done(response => {
console.log(response);
response = JSON.parse(response);
if (response.message) {
alert(response.message);
}
});
});
});
</script>
The issue which I am facing right now with the code above is when we hit save button I am getting the following error message on the console:
VM68:1 Uncaught SyntaxError: Unexpected token I in JSON at position 0
at JSON.parse (<anonymous>)
at Object.<anonymous> (index.php:1011)
at c (jquery-3.5.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
at l (jquery-3.5.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)
Here line#1011 is response = JSON.parse(response); from the js code above.
Problem Statement: I am wondering what changes I need to make in the js code above so that on hitting save button I do not get that error message on the console.

If are aware of the error and just want to ignore it/handle it use a try/catch block. That error is usually because response isn't a valid json string so JSON.parse will keep failing.
$(function () {
$('form').submit(function (e) {
e.preventDefault();
$.post({
url: 'save.php',
data: $(this).serialize(),
}).done(response => {
try{
response = JSON.parse(response);
if (response.message) {
alert(response.message);
}
}
catch (e) {
//do something like alert user the request failed
alert('Request to server failed');
}
});
});
More on try/catch from mozilla.

Uncaught TypeError: Cannot read property 'split' of undefined

I'm trying to edit a record through AJAX, but it fails intermittently with the following error
Uncaught TypeError: Cannot read property 'split' of undefined
Here is the code:
$.ajax({
type: "POST",
url: url + "/customer/" + customer_id + "/order/" + order_id + "/cust_inline_editing",
data: {
'_token': token,
'order_id': order_id,
'hourid': hourid
},
async: false,
success: function(data) {
$("#inline_submit").text('Update');
var result = JSON.parse(data);
alert(result.dato);
var edit_date = result.dato.null.split("-").reverse().join(".");
$("#dato").val(edit_date);
}
});
What is the cause of the error?

Check condition if result.dato not null then only split.
if(result.dato != null) {
var edit_date = result.dato.split("-").reverse().join(".");
$("#dato").val(edit_date);
}

Uncaught TypeError: Illegal invocation for pass the data to php

I got this error for passing data to PHP file using jQuery.
Uncaught TypeError: Illegal invocation.
Can some one tell me how to resolve this? Thanks.
This is my code:
function updatetask() {
var tid = document.getElementById('task_id').value;
var pid = document.getElementById('projct_id').value;
var title = document.getElementById('ts_title').value;
var desc = document.getElementById('description').value;
var tag = document.getElementById('tag').value;
var sdate = document.getElementById('sdate').value;
var edate = document.getElementById('edate').value;
var status = document.getElementById('status_option').value;
var complete = document.getElementById('ts_complete').value;
var uid = document.getElementById('assign_id').value;
$.ajax({
type: 'POST',
url: '<?php echo $url; ?>/js-files/updateTitle.php',
data: { task_id: tid, proj_id: pid, task: title, descrip: desc, tags: tag, start: sdate, due: edate, state: status, complete: completed, emp_id: uid },
success: function(data) {
alert('success update assign');
}
});
}
javascript console return this error
Uncaught TypeError: Illegal invocation
add
buildParams
buildParams
buildParams
jQuery.param
jQuery.extend.ajax
updatetask
onclick

Why is my AJAX call success function not firing a java script alert?

$.ajax({
url: '../api/notifications/deleteNotification?userId=' + userId + '&notificationId=' + notificationId,
type: 'DELETE',
success: function()
{
CreateNotificationTree(userId);
alert('Delete successful.');
},
failure: function()
{
alert('Delete failed.');
}
});
The function CreateNotificationTree(userId); that is inside the success function of the ajax call above DOES fire. However, the Alert is not firing after. Does anybody know why? I have tried to use multiple browsers as well.
EDIT - found out I'm running into this error when the AJAX call executes:
Uncaught TypeError: Cannot read property 'uid' of undefined kendo.web.min.js:23
(anonymous function) kendo.web.min.js:23
p.extend.each jquery.min.js:2
p.fn.p.each jquery.min.js:2
g.extend._attachUids kendo.web.min.js:23
g.extend.init kendo.web.min.js:22
(anonymous function) kendo.web.min.js:9
p.extend.each jquery.min.js:2
p.fn.p.each jquery.min.js:2
$.fn.(anonymous function) kendo.web.min.js:9
CreateNotificationTree NotificationsTreeView.js:17
(anonymous function) NotificationsTreeView.js:60
k jquery.min.js:2
l.fireWith jquery.min.js:2
y jquery.min.js:2
d

Log the error to your console.
You do not see the alert if ajax fails method as jQuery does not identify the failure method.
Use a error callback to log the error.
Also use console.log instead of alert which is annoying and stops the flow of execution
failure: function(){
alert('Delete failed.');
}
supposed to be
error: function(){
alert('Delete failed.');
}
And use done and fail instead of success and error callbacks as the latter as deprecated as of version 1.8
$.ajax({
url: '../api/notifications/deleteNotification?userId='
+ userId + '&notificationId=' + notificationId,
type: 'DELETE'
}).done(function () {
CreateNotificationTree(userId);
console.log('Delete successful.');
}).fail(function (jqXHR, status, error) {
console.log("Error : " + error);
});
Use the arguments that are passed to the callbacks and you ll be able to pinpoint the error.