Vue / JavaScript validate data in loop

user_1091439 0
Viewed 35

I have this data property :

mappingData: {
    id_feed: "",    
    projectFieldOptions: [],
},

This projectFieldOptions is filled up using a http call:

http.get("xml-fields")
    .then((response) => {
        let _this = this;
        _this.xmlFields.push({
            value: "do_not_import",
            text: "Do Not Import",
            id: 0,
        });
        response.data.forEach(function (item) {
            _this.xmlFields.push({
                value: item.field_slug,
                text: item.field_title,
                id: item.id_xml_field,
            });
        });
    })
    .catch((error) => {
        console.log(error);
    });

So, this projectFieldOptions now contain this. Basically each object represent a each dropdown box.

[ { "value": "title", "text": "Do Not Import", "custom": null }, { "value": "short_message", "text": "Do Not Import", "custom": null }, { "value": "url", "text": "Do Not Import", "custom": null }, { "value": "campaign_id", "text": "Do Not Import", "custom": null }, { "value": "aff_code", "text": "Do Not Import", "custom": null }, { "value": "campaign_url", "text": "Do Not Import", "custom": null }, { "value": "other_data", "text": "Do Not Import", "custom": null }, { "value": "product_id", "text": "Do Not Import", "custom": null }, { "value": "created_at", "text": "Do Not Import", "custom": null }, { "value": "product_active", "text": "Do Not Import", "custom": null }, { "value": "brand", "text": "Do Not Import", "custom": null }, { "value": "old_price", "text": "Do Not Import", "custom": null }, { "value": "subcategory", "text": "Do Not Import", "custom": null }, { "value": "category", "text": "Do Not Import", "custom": null }, { "value": "price", "text": "Do Not Import", "custom": null }, { "value": "widget_name", "text": "Do Not Import", "custom": null }, { "value": "campaign_name", "text": "Do Not Import", "custom": null }, { "value": "image_urls", "text": "Do Not Import", "custom": null }, { "value": "description", "text": "Do Not Import", "custom": null } ]

In above output you can see I have a array of object and each object has text property which value initially is Do Not Import. But from the dropdown If I choose other option then this text property value will be changed.

Now, I want to show a alert('success') IF at least one text property value is not Do Not Import or do_not_import otherwise alert('false')

I mean user must select at least one value from the dropdown that is other than Do Not Import or do_not_import.

What I am trying :

watch : {
    mappingData: {
        handler(newData, oldData) {
            for( let key in newData.projectFieldOptions ) {
                if( newData.projectFieldOptions[key].text == 'Do Not Import' ||  newData.projectFieldOptions[key].text == 'do_not_import' ) {
                    alert('error');
                } else {
                    alert('false');
                }
            }
        }
    }
}

but above code is only work for the last dropdown list only. I mean this last dropdown:

enter image description here

Overall, I need to check user must choose at least one value from the dropdowns.

vue.js javascript
1 Answers

Something like that will tell you if you have a least one element that is not to be imported.

const atLeastOneNotToImport = x.some(el => el.text === 'Do Not Import' || el.text === 'do_not_import')
console.log(atLeastOneNotToImport) // true

This is on top of my comment: Vue / JavaScript validate data in loop

user_88165850
Related