JavaScript - returning [object Object]

Question

I'm working on a dynamic form that appends groups of input fields to the page based on user input. Because of some additional functionality that needs to be attached to some of these elements, I need to create them as JSON objects. When I test this method with only one input element, the element is appended to the page, no problem. However, when I try to incorporate a second element into the process, I get [object Object] [object Object] appended to the page instead.

Here's the gist...

//THIS IS THE PROBLEM FUNCTION, WHICH IS TRIGGERED BY THE CHANGE FUNCTION BELOW
function generateInput(siteNumber, x){

    select = $("<select/>", {
                id: 'select'+siteNumber+''+x+'',
                name: 'select'+siteNumber+'['+x+']'
                }).append(list);

    notes = $("<input/>", {
                type: 'text',
                id: 'notes'+siteNumber+''+x+'',
                name: 'notes'+siteNumber+'['+x+']'
                });


    //IF I RETURN ONE OR THE OTHER, NO PROBLEM
    return select + notes;
};

$(document).on("change", ".number_select", function(){
    siteNumber = $(this).parent().attr('data-site_number');
    numberFound = $(this).val();

    for(x = 1; x <= numberFound; x++){
        this['inputArray' + siteNumber].push(generateInput(siteNumber, x));
     };

     $(this).parent().append(this['inputArray' + siteNumber]);
});

I imagine that the problem is with the way that I am returning the elements at the end of generateInput, but I'm not sure of the proper way to handle this. Basically, what I am aiming to get is the select element with the text element sitting next to it.

Thanks very much!

notes is an object. + notes will stringify the object thus [object Object] — elclanrs
– elclanrs, Commented Apr 1, 2016 at 14:56
JSON is not an object. JSON is a string. Don't call JavaScript objects JSON. — Michał Perłakowski
– Michał Perłakowski, Commented Apr 1, 2016 at 14:57

axelduch · Accepted Answer · 2016-04-01 15:00:01Z

3

The + operator will call the toString() method of one of the terms if the other is a string.

This is not what you want, what you want instead is to merge the jQuery objects into one

Thus

return select + notes;

Could become (see jquery doc for add):

return select.add(notes);

answered Apr 1, 2016 at 15:00

axelduch

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michał Perłakowski · Accepted Answer · 2016-04-01 15:03:34Z

1

If you have two objects and add them, they are cast to string using .toString() method, which returns string "[object Object]". It means this is an object, which is instance of Object. If you want to return both object, you can return them for example as array:

return [species, notes];

Then you can pass the result to the .push() method using spread operator:

this['inputArray' + siteNumber].push(...generateInput(siteNumber, x));

However, since the .push() method accepts many arguments, you don't even need to modify this part of code.

answered Apr 1, 2016 at 15:03

Michał Perłakowski

93.3k30 gold badges165 silver badges189 bronze badges

1 Comment

skwidbreth Over a year ago

I'm accepting the other answer because it works better in a few other circumstances that arise on the form, but this is a good answer.

Collectives™ on Stack Overflow

JavaScript - returning [object Object]

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related