output is [object,Object] even with JSON.stringify

Question

I have a JSON file with numerous entries. Below is just 2 of them.

{
  "layers": [
    {
        "name": "Test1",
        "id": "Feature",
        "subject": "General"        
    },
    {
        "name": "Test2",
        "id": "Feature",
        "subject": "General"        
     }
 ]
}

When I run this script and all checkboxes are rendered ok. When I click one of them, I get the output at the console as [object,Object]. Can't see any of properties. I tried the JSON.stringify but no success. Ideas? Thanks.

function XX(){
 var mydata = JSON.parse(data)            
                subjects = []
                for (var i = 0; i < mydata.layers.length; i++) {
                    theID = mydata.layers[i].name                   
                    subjects[i] = mydata.layers[i].subject
              
                 if (!thecontent[subjects[i]]) {
                
                    thecontent[subjects[i]] = '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL("' + mydata.layers[i] + '")\'>'
                 } else {
                   
                    thecontent[subjects[i]] += '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL("' +  mydata.layers[i] + '")\'>'
                 }                   
                    thecontent[subjects[i]] += '<label for="' + theID + '">&nbsp;' + mydata.layers[i].name +
                        '</label><br>'
                }               
                for (k = 0; k < subjects.length; k++) {
                    
                    document.getElementById(subjects[k]).innerHTML = thecontent[subjects[k]] + '<br>'
                }                
            }
}

            window.loadFL = function (theresponse) {
               
            console.log(theresponse);
            }

What is theresponse in this line console.log(theresponse); and how it is populated — LMC
– LMC, Commented Sep 2, 2021 at 1:46
#LMC I stated in the description that console.log was showing [object, Object] — engineer who loves coding
– engineer who loves coding, Commented Sep 2, 2021 at 20:26

hackape · Accepted Answer · 2021-09-02 02:06:12Z

When you do this:

thecontent[subjects[i]] += '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL("' +  mydata.layers[i] + '")\'>'

or let me mod it into a simpler form, for ease of discussion:

const myInput = '<input onclick=\'loadFL("' + myObject + '")\'>'

You’re concatenating object to string with + operator. That’ll type-cast object into string type, by implicitly calling myObject.toString() method (inherited from Object.prototype) which will return the string "[object,Object]".

So if you console.log(myInput), you’ll see this:

<input onclick='loadFL("[object, Object]")' >

Above is the explanation.

Below is solution.

If you only need to pass the JSON string value to loadFL. You can do:

const myInput = '<input onclick=\'loadFL(' + JSON.stringify(JSON.stringify(myObject))+ ')\'>'

You read it right, remove the double quotes " in the string, and use JSON.stringify twice.

But if you need to pass the object value, there’s no easy way using HTML string. I’d suggest you use JavaScript to add event listener to HTML node.

PhongHNg · Accepted Answer · 2021-09-02 01:59:30Z

0

If JSON.stringify() doesn't work, you can try to print the index of layers like this:

// some code
thecontent[subjects[i]] = '<input type="checkbox" id="' + theID + '" onclick=\'window.loadFL("' + i + '")\'>'
// some code

window.loadFL = function (layers_index) {
    console.log(mydata.layers[layers_index]);
}

answered Sep 2, 2021 at 1:59

PhongHNg

614 bronze badges

Collectives™ on Stack Overflow

output is [object,Object] even with JSON.stringify

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related