-2

This is from data submitted with a form. I have no control over the generation of the JSON because it is done using JSON.stringify(). On the server I receive the following JSON string which I want to parse back into a Javascript object using JSON.parse().

However there seems to be a problem at the "uploadedFilename" part which JSON.parse() can't handle but I don't understand why or what it is:

[
'{"originalFilename":"A.jpg","uploadedFilename":"A-15904372.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null}'
,
'{"originalFilename":"B.jpg","uploadedFilename":"B-972341252.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null}'
]

JSON.parse() return the following error:

SyntaxError: Unexpected token u in JSON at position 0

So I put the code into https://jsonformatter.org and the error says:

Parse error on line 1:
[ '{"originalFilename"

-------^ Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', ']', got 'undefined'

volume one
  • 6,800
  • 13
  • 67
  • 146
  • Single quotes are not valid json...valid would look more like ... `["{\"originalFilename\":\"A.jpg\"...` or not have the outer quotes at all – charlietfl May 25 '20 at 20:29
  • 3
    That is **not** the output of JSON.stringify – Quentin May 25 '20 at 20:30
  • Sounds like he's probably confused himself. Tried to copy paste stringify output into an array variable declaration and then JSON.parse'd the variable he declared. And thinks that variable declarations and JSON is the same thing. – user120242 May 25 '20 at 20:32
  • The Json is containing strings not objects...It should be generated without quotes : Try fixing it bro , You should contain array of 2 objects not 2 strings :) [{"originalFilename":"A.jpg","uploadedFilename":"A-15904372.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null} , {"originalFilename":"B.jpg","uploadedFilename":"B-972341252.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null} ] – Imran Rafiq Rather May 25 '20 at 20:32
  • 1
    Does this answer your question? [What is JSON?](https://stackoverflow.com/questions/286945/what-is-json) _This is really just a dupe of asking "what is json?" since it's clear OP doesn't understand what JSON really is._ – user120242 May 25 '20 at 20:35

1 Answers1

2

What you have shown is not valid JSON. (But it is valid Javascript - which we can exploit as a workaround). In any case, for JSON compatibility, that single tick, ' is just wrong. JSON Strings are always started with a double-quote, " char.

If this is supposed to be an array of two objects, this is correct:

[
{"originalFilename":"A.jpg","uploadedFilename":"A-15904372.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null}
,
{"originalFilename":"B.jpg","uploadedFilename":"B-972341252.jpg","size":9149216,"type":"image/jpeg","isUploading":false,"isUploaded":true,"uploadPromise":{},"uploadProgress":100,"invalidFileMessage":null}
]

And if the intent is to have this be an array of strings instead of an array of objects, this would be correct (escape the actual quotes ")

[
"{\"originalFilename\":\"A.jpg\",\"uploadedFilename\":\"A-15904372.jpg\",\"size\":9149216,\"type\":\"image/jpeg\",\"isUploading\":false,\"isUploaded\":true,\"uploadPromise\":{},\"uploadProgress\":100,\"invalidFileMessage\":null}"
,
"{\"originalFilename\":\"B.jpg\",\"uploadedFilename\":\"B-972341252.jpg\",\"size\":9149216,\"type\":\"image/jpeg\",\"isUploading\":false,\"isUploaded\":true,\"uploadPromise\":{},\"uploadProgress\":100,\"invalidFileMessage\":null}"
]

Now that blob of data that you have may not be valid JSON, but it is valid Javascript.

So you could do this:

eval("obj = " + response_string);

Where response_string is your original string as you have in your quession. Then when that statement returns, obj is your data. It will be an array of two strings in this case. Both strings are valid json. You could then JSON.parse(obj[0]) and JSON.parse(obj[1]) and so on.

selbie
  • 100,020
  • 15
  • 103
  • 173
  • I don't understand the love for this answer and the downvote on mine, even if I admittedly think pedagogically selbie's is a more useful explanation: there's no need to change the strings inside his array; they're already valid JSON strings... so what selbie is pointing out isn't really correct, even if yes it will eventually lead the OP to understanding the problem better – user120242 May 25 '20 at 20:38
  • 2
    @user120242 - Put yourself in the OP's shoes. One answer basically says "single quotes are wrong" without any additional guidance. The other answer explains the structure of correct data from two different perspectives and suggests a workaround for the OP if he can't control the what he receives. Which one would you upvote? Your answer isn't necessarily wrong, it just doesn't help much. Explanations and suggestions are always more appreciated than textbook facts. – selbie May 25 '20 at 20:49
  • that wasn't mine. I'd have voted that one down too. Mine was just a correct workaround without detailed explanation. All mine did was show through a simple runnable code with a map comprehension showing that his strings are valid JSON, and that's how he should be processing it, so he can see easily that his Javascript variable declaration isn't JSON. I'm pointing out that I feel like yours I would vote down for not being entirely accurate, because his two strings are valid JSON, but you just say that it's not valid JSON, and it should be corrected to point that out. – user120242 May 25 '20 at 20:52
  • *this is not to say I don't agree with what you're saying. I wasn't even intending to "answer" or provide the actual solution. Just a runnable example pointing out the issue of, "that is working as intended". I fully expected an answer with better explanation (like yours) to pop up, though I was expecting it to be more accurately "correct" – user120242 May 25 '20 at 20:57
  • @user120242 - my bad. I was obviously looking at the answer. You offer a good workaround, but your answer could be improved. Primarily, give a technical explanation why the OP is having the problem he's experiencing before just throwing some code out. The OP is already having issues with JSON and Javascript, so just having "more code" (even if it works) is only going to confuse him more. For the record, I didn't downvote either answer. – selbie May 25 '20 at 21:00
  • Ya, honestly I wasn't even intending to "answer" or provide the actual solution. Just a runnable example pointing out the issue of, "that is working as intended". I fully expected an answer with better explanation (like yours) to pop up, though I was expecting it to be more accurately "correct", which is why I commented as such. Don't get me wrong, I like your answer. – user120242 May 25 '20 at 21:02
  • There's nothing wrong with giving an answer in the comments. I do it as often as I write up a full answer. – selbie May 26 '20 at 00:03
  • ya, that's what I normally do, but in this case I needed to show a runnable snippet demo. it'd be nice if I could do that in comments – user120242 May 26 '20 at 00:07
  • 1
    I think it also goes without saying, that the OP should press on the developer of the service giving him this data to encode as valid json. You'd be surprised how many smart engineers don't bother to use a proper formatting library, but instead try to concoct their own quick and dirty encoders - that are often buggy with respect to special characters, escape sequences, unicode, etc... – selbie May 26 '20 at 00:10