从多个值将多个 url 插入输入字段

Question

我有一个 fetch get 请求，它解析页面并获取一些参数以生成新的 url 并将其插入输入字段
我有来自 value1、value2、value3
的多个值问题是我如何从这个参数生成多个 urls 并将其插入到字段中（字段应该动态生成）？
现在，window with form don't generates

如果我将 break 放入循环中，代码会生成带有表单的 window 但只显示一个 url

由于此代码应该 Window 具有表单和三个输入字段 urls

var url = 'google.com/page1'
fetch(url, {
        method: 'GET',
        credentials: 'include',
    })
    .then(function(response) {
        return response.text()
    })
    .then(function(html) {
            var parser = new DOMParser();
            var doc = parser.parseFromString(html, "text/html");
            var value4 = 'test4';
            var UrlArr = [];
            if (condition) {
                var name = doc.querySelectorAll("someClass");
                for (var i = 0; i < name.length; i++) {
                    var allNames = name[i].outerHTML;
                    var value1 = allNames.match('MyregExp1')[0];
                    var value2 = allNames.match('MyregExp2')[0];
                    var value3 = allNames.match('MYregExp3')[0];

                    var newUrl = `google.com/?${value1}&${value2}&${value3}&test=${value4}`;
                    //brake

                    console.log(value1);
                    // something1
                    // something2
                    // something3
                    // etc...

                    console.log(value2);
                    // something11
                    // something22
                    // something33
                    // etc...

                    console.log(value3);
                    // something111
                    // something222
                    // something333
                    // etc...


                    UrlArr.push(newUrl);
                    console.log(UrlArr);
                    //first-array
                    // [google.com/?something1&something2&$something3&test=test4]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                    // second-array
                    // [google.com/?something1&something2&$something3&test=test4,google.com/?something11&something22&$something33&test=test4 ]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                    // third-array
                    // [google.com/?something1&something2&$something3&test=test4,google.com/?something11&something22&$something33&test=test4,google.com/?something111&something222&$something333&test=test4]
                    // 0: google.com/?something1&something2&$something3&test=test4
                    // 1: google.com/?something11&something22&$something33&test=test4
                    // 2: google.com/?something111&something222&$something333&test=test4

                }
                if (allNames.length >= 2) {

                    var newForm = Ext.create('Ext.form.Panel', {
                        title: 'Form',
                        width: 250,
                        autoHeight: true,
                        autoScroll: true,
                        bodyPadding: 10,
                        id: 'Form',
                    });


                    function newRadio() {
                        var radio = new Ext.form.Radio({
                            height: 40,
                            labelWidth: 110,
                            width: 20,
                            name: 'url',
                        });
                        return radio;
                    }


                    function newTextArea(id) {
                        var textArea = new Ext.form.TextArea({
                            fieldLabel: i + '_url',
                            height: 30,
                            labelWidth: 110,
                            width: 330,
                            submitValue: false,
                            readOnly: true,
                            autoScroll: true,
                            id: id
                        });
                        return textArea;
                    }


                    for (i = 0; i < name.length; i++) {
                        var id = i;
                        id = 'field_' + id;
                        var field = newTextArea(id);
                        var radioGr = newRadio();
                        var cont = NewContainer();
                        field.setValue(UrlArr);
                        newForm.add(cont);
                    }

                    function NewContainer() {
                        var container = new Ext.container.Container({
                            xtype: 'container',
                            layout: 'hbox',
                            items: [radioGr, field]
                        });
                        return container;
                    }

                    var win = new Ext.Window({
                        title: "Window",
                        layout: 'fit',
                        modal: 'true',
                        height: 500,
                        width: 385,
                        items: [newForm],
                        buttons: [{
                            text: "Confirm",
                            handler: function() {
                                //something handler
                            }
                        }]
                    });
                    win.show();


                }
            }

Answer 1

您提供的代码中存在一些问题，例如：

Container 在 radio 和 textArea 之前创建。
您的要求是在字段内设置 newUrl，但是已经有一个 for 循环，其中这个变量正在更新并且它在 for 循环的范围内。因此，您可以将另一个变量定义为第一个 for 循环上方的数组，并将 url 推入该数组。

我已经修改了您的代码，参考下文并为您的案例提供了有效的 fiddle。

var url = 'google.com/page1'
fetch(url, {
        method: 'GET',
        credentials: 'include',
    })
    .then(function (response) {
        return response.text()
    })
    .then(function (html) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, "text/html");
        var value4 = 'test4';
        var UrlArr = [];
        if (condition) {
            var name = doc.querySelectorAll("someClass");
            for (var i = 0; i < name.length; i++) {
                var allNames = name[i].outerHTML;
                var value1 = allNames.match('MyregExp1')[0];
                var value2 = allNames.match('MyregExp2')[0];
                var value3 = allNames.match('MYregExp3')[0];

                var newUrl = `google.com/?${value1}&${value2}&${value3}&test=${value4}`;

                console.log(value1);

                console.log(value2);

                console.log(value3);


                console.log(newUrl);
                UrlArr.push(newUrl);

            }
            if (allNames.length >= 2) {

                var newForm = Ext.create('Ext.form.Panel', {
                    title: 'Form',
                    width: 250,
                    autoHeight: true,
                    autoScroll: true,
                    bodyPadding: 10,
                    id: 'Form',
                });


                function newRadio() {
                    var radio = new Ext.form.Radio({
                        height: 40,
                        labelWidth: 110,
                        width: 20,
                        name: 'url',
                    });
                    return radio;
                }


                function newTextArea(id) {
                    var textArea = new Ext.form.TextArea({
                        fieldLabel: i + '_url',
                        height: 30,
                        labelWidth: 110,
                        width: 330,
                        submitValue: false,
                        readOnly: true,
                        autoScroll: true,
                        id: id
                    });
                    return textArea;
                }


                for (i = 0; i < name.length; i++) {
                    var id = i;
                    id = 'field_' + id;
                    var field = newTextArea(id);
                    var radioGr = newRadio();
                    var cont = NewContainer();
                    field.setValue(UrlArr[i]);
                    newForm.add(cont);
                }

                function NewContainer() {
                    var container = new Ext.container.Container({
                        xtype: 'container',
                        layout: 'hbox',
                        items: [radioGr, field]
                    });
                    return container;
                }

                var win = new Ext.Window({
                    title: "Window",
                    layout: 'fit',
                    modal: 'true',
                    height: 500,
                    width: 385,
                    items: [newForm],
                    buttons: [{
                        text: "Confirm",
                        handler: function () {}
                    }]
                });
                win.show();
            }
        }
    });

从多个值将多个 url 插入输入字段

insert multiple urls into inputfields from multiple values

javascript

extjs

fetch