CODEWITHSUNDEEP
javascriptjsonstringify
alxfyv
alxfyv

Reputation: 389

In JavaScript & JSON, why is the result of str = JSON.stringify(obj); equal to {}?

I'm a recent, self-taught JavaScript & JSON initiate. This demi-project is a scrap of my second JavaScript project. Please be gentle with me.

I am attempting to input a JSON file, stringify it, and output the resulting string. The file is a JavaScript object. But when I execute the statement str = JSON.stringify(obj); I get the result that str === {}.

Why is the stringified file object equal to {}? How can I get it to be a string equal to the JSON file stringified?

The JavaScript is:

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',
        ') - ', f.size, ' bytes, last modified: ' f.lastModifiedDate ?
        f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
    }
    document.getElementById('OutputArea').innerHTML = '<ul>' +
    output.join('') + '</ul>';
    var obj = files[0];
    var str = JSON.stringify(obj);
    document.getElementById( 'OutputArea' ).innerHTML += "obj : " +
    obj + "<br><br>obj stringified : " + str;
}   // end def fn handleFileSelect

// set event listener on InputArea
document.getElementById('InputArea').addEventListener('change',
handleFileSelect, false);

The HTML is:

<html lan="en">
   <head>
      <title="A JSON exercise"></title>
   </head>
   <body>

      <input id="InputArea" name="files[]" type="file" accept="application/json"
      multiple />
      <output id="OutputArea"</output>

   </body>
</html>

The relevant output of the JavaScript is:

obj: [object File]

object stringified : {}

The JSON file, composed in BBEdit for Mac and saved as a Unicode (UTF-8) file, is:

{
"FHC-Class-Schedule" : [

    {
        "time" : "0830",
        "room" : "A-I",
        "classTitle" : 
            "Keynote Address",
        "classDescription" : 
            "Room I [content to come]",
        "instructorName" : "Crista Cowen",
        "instructorGender" : "female",
        "instructorBio" : 
            "Crista Cowan has been employed by Ancestry.com since 2004.",
        "instructorImgHref" : 
            ""
    }
  ]
}

There is a pen at CodePen: A JSON Exercise. You will need a local JSON file to input to it.

Any help will be much appreciated

EDIT 01:

OK, I reformatted the JSON file and validated it with an online JSON validator (Free Online JSON Formatter). I still get the same result. (I also inserted a new first paragraph.)

Upvotes: 1

Views: 660

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075059

JSON.stringify (spec, MDN) only includes properties that fit all of the following criteria:

  • They are own properties (not ones the object inherits from its prototype)
  • They are enumerable properties (e.g., the kind that show up on for-in loops)
  • Their names are strings (not Symbols)
  • Their values are not undefined or functions

The object you're trying to convert to JSON would appear to only have inherited or non-enumerable properties, and/or ones whose values are undefined or functions.

Separately, though, just in case there's any confusion: Note that files[0] won't contain the loaded JSON from the file. files[0] is just a record for that file in the list of files in the input type="file". To load its content, you'd have to use a FileReader. This answer (of mine) shows how to do that. Once you'd read it (probably using readAsText), you'd have the JSON string (and then could use JSON.parse to convert it to an object structure).

Upvotes: 4

Related Questions