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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.