Correct parsing of JSON data set with PHP's json_encode and FormData

I'm not real familiar with JSON, and I cannot figure out how to parse this simple array.
I am using jQuery 3.3.1 and FormData, as this is a multipart form. There are uploaded files that need to be processed.
Data is sending to PHP, and processing and updating okay. I have tried every which way to parse the return data to no avail, including using JSON.parse, data.SuccessMessage, data[0].SuccessMessage, data[0], data.SuccessMessage[0]. Obviously, I'm lost.

jQuery
var Data = new FormData(Form[0]);
$.ajax(
{
   url: 'Ajax-Forms.php',
   type: 'POST',
   data: Data,
   async: false,
   cache: false,
   contentType: false,
   processData: false,
   success: function (data)
   {
      console.log(data); // {"SuccessMessage":"Test Record 03 has been updated","ID":"4884"}
   }
}

Open in new window

PHP
echo json_encode(array("SuccessMessage"=>$SuccessMessage, "ID"=>$ID));

Open in new window

As noted in the comment, the data comes back as
{"SuccessMessage":"Test Record 03 has been updated","ID":"4884"}

Open in new window

So all I need to know is how to parse this return data.
LVL 1
RationalRabbitAsked:
Who is Participating?
 
Julian HansenCommented:
To parse JSON in JavaScript we use JSON.parse(jsonString);
HOWEVER,
When you AJAX a server endpoint that returns JSON you can get jQuery to do this for you by adding the following option
dataType: 'JSON'

Open in new window

To the AJAX options
$.ajax(
{
   url: 'Ajax-Forms.php',
   type: 'POST',
   data: Data,
   dataType: 'JSON',
   cache: false,
   contentType: false,
   processData: false
).then(function (data) {
      console.log(data); // Will now log a JavaScript Object

      // Demonstrate how we can access the returned data as an object
      console.log('Message: [%o with ID %o]', data.SuccessMessage, data.ID);
});

Open in new window

Notes:
Don't use async: false - if you are doing this you don't understand AJAX coding
I have used the Promise return (then) rather than the deprecated 'success' callback option.
1
 
RationalRabbitAuthor Commented:
:0) Not used to jQuery AJAX coding at all. Nor have I used JSON much, Done a lot of AJAX the old - drawn out way and, in most instances, just sent back a delimited string of values and split it.

I thought async:false was weird, but was told it was necessary to send files to be processed. Previously tried dataType: 'JSON' (which is what I usually do), but without changing anything else and that didn't work at all.

Will change my code and return.
0
 
Julian HansenCommented:
If you are sending files - why not use a library like DropZone.js
1
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
RationalRabbitAuthor Commented:
Thanks again, Julian! Works just fine.

As far as DropZone, just seems like another interface to deal with. I realize it is customizable, features drag and drop, etc., but I don't really see it as that much of a benefit to the user. I haven't read usage studies in that area, so I don't really know, but, personally, it is a lot easier to select a file than worry about moving windows around in order to drag and drop. Add to that - this is an Intranet program people will be accessing from the field.
0
 
Julian HansenCommented:
Ok, glad you got sorted.
1
 
RationalRabbitAuthor Commented:
ExpEx.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.