Convert Javascript array back into JQuery-type object

Question

For the code below, I wanted to make the _formsOk function work for both Javascript arrays and "JQuery objects". In function1(), I tried to create a Javascript array with all DOM elements except those that have a parent element with id="objectTypesContainer". Basically, function1() filters out the DOM elements I don't want before calling _formsOk() function, which does the actual form validation.

function1() {
    var allForms = $('form:not(.vv_hidden)', this.selectMarketsContainer);
    var nonObjectTypeForms = [];
        allForms.each(function () {
            if ($(this).parent().attr("id") !== "objectTypesContainer"){
                nonObjectTypeForms.push($(this)[0]);
            }
        });

        return this._formsOk(nonObjectTypeForms);
},

_formsOk: function($forms) {
        var formOk = true;
        console.log(typeof $forms)
        $forms.each(function () {  // This line fails
            var validator = $(this).validate(DEFAULT_VALIDATION_OPTIONS);
            if (!(validator && validator.form())) {
                formOk = false;
            }
        });
        return formOk;
},

However, I realized that because nonObjectTypeForms is now a JS Array rather than a "JQuery Object", the line marked (// This line fails) now fails.

The original code looked like this:

function1() {
    var allForms = $('form:not(.vv_hidden)', this.selectMarketsContainer);  // This is a "JQuery object", so no error occurs
    return this._formsOk(allForms);
},

_formsOk: function($forms) {
        var formOk = true;
        console.log(typeof $forms)
        $forms.each(function () {  // This line fails
            var validator = $(this).validate(DEFAULT_VALIDATION_OPTIONS);
            if (!(validator && validator.form())) {
                formOk = false;
            }
        });
        return formOk;
},

Is there a way I can convert a JS array into a JQuery object ? I don't want to change _formsOk function definition just yet.

@Karl-AndréGagnon. That does work. Thanks for the suggestion. I'm a newbie at Javascript/JQuery. — Steven Xiong
– Steven Xiong, Commented Oct 10, 2019 at 18:12
@Neil. Some error is returned related to forms object not being JQuery object. — Steven Xiong
– Steven Xiong, Commented Oct 10, 2019 at 18:13
@JeroenHeier the line is shown in the code - it's $forms.each(). It would fail because $forms is a plain JS array, so it doesn't have a method called .each. — VLAZ
– VLAZ, Commented Oct 10, 2019 at 18:20

VLAZ · Accepted Answer · 2019-10-10 18:09:36Z

2

Instead of putting all elements in a new array, just use .filter() from the jQuery object.

allForms.filter(function () {
   return $(this).parent().attr("id") !== "objectTypesContainer")
});

This will remove all the items you don't need in your selection and now allForms will only have the wanted elements.

answered Oct 10, 2019 at 18:09

VLAZ

29.6k9 gold badges65 silver badges87 bronze badges

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

1 Comment

Steven Xiong Over a year ago

Thank you @VLAZ. That was a much cleaner solution for me!

Collectives™ on Stack Overflow

Convert Javascript array back into JQuery-type object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related