Can you loop through data inside another loop

Question

I have a html textarea where i paste lines of text, each 11 lines follows a repeating pattern. What i'd like to acheive is to loop through the first 11 lines, process each line then loop the next 11 lines and carry out the same process on those 11 lines. I have broken the lines into chunks of 11 lines each.

Problems: looping each chunk 12 times, no output to other textarea.

not sure if i'm even doing this correctly,

<!doctype html>
    <html>
    <head>  
    </head>
    <body>

    <textarea id="txtinput" class="txtinput" cols="150" rows="15"></textarea>
    <br />
    <button id="btn-pro">PROCESS</button>&nbsp;&nbsp;<button id="cleartxt">CLEAR</button>
    <br />
    <br />
    <textarea id="txtoutput" class="txtinput" cols="150" rows="15"></textarea>


    <script type="text/javascript">
        var input = document.querySelector('#cleartxt');
        var btnClick = document.querySelector('#btn-pro');
        var textarea = document.querySelector('.txtinput');

        input.addEventListener('click', function () {
            textarea.value = '';   
        }, false);
        //
        //
        btnClick.addEventListener('click', function () {

        var textArea = document.getElementById("txtinput");
        var lines = textArea.value.split("\n");

            for(var i = 0;i <= lines.length;i+=11){
                const chunk = lines.slice(i, i + 11);
                chunk.push(chunk);
                console.log(chunk);
                //
                for (const key in chunk) {
                    console.log('XXXXXXXXXXXXX: '+chunk[0]);
                    var L1 = chunk[0];
                    var L2 = chunk[1];
                    var L3 = chunk[2];
                    var L4 = chunk[3];
                    var L5 = chunk[4];
                    var L6 = chunk[5];
                    var L7 = chunk[6];
                    var L8 = chunk[7];
                    var L9 = chunk[8];
                    var L10 = chunk[9];
                    var L11 = chunk[10];

                    console.log('Line 1: '+L1+'\nLine 3: '+L2+'\nLine 3: '+L3+'\nLine 4: '+L4+'\nLine 5: '+L5+'\nLine 6: '+L6+'\nLine 7: '+L7+'\nLine 8: '+L8+'\nLine 9: '+L9+'\nLine 10: '+L10+'\nLine 11: '+L11);


                    //
                    document.getElementById("txtoutput").value = L1;
                }

            }
        
        }, false);
    </script>
        
    </body>
    </html>

my textarea is like this:

<textarea>
AAAA
BBBB
CCCC
DDDD
EEEE
FFFF
GGGG
HHHH
IIII
JJJJ
KKKK
AAAA
BBBB
CCCC
DDDD
EEEE
etc...
etc...



</textarea>

Is it throwing an error? If there's no output to the textarea, have you checked the value of `L1` before you assigned the textarea value to `L1`? — mykaf, Jan 21 '22 at 18:49
No errors, It is getting each line of text, however its outputting it 12 times to the console. — monkeykong, Jan 21 '22 at 19:29
The comment above is wrong, its getting each chunk of 11 lines, then outputting that to the console 11 times, for each chunk of 11. — monkeykong, Jan 21 '22 at 20:16

score 0 · Answer 1 · answered Jan 21 '22 at 18:52

0

Why do you try to push the chunk into itself?

const chunk = lines.slice(i, i + 11);
chunk.push(chunk);
console.log(chunk);

answered Jan 21 '22 at 18:52

Janis Huser

1

I was pushing it to another array called chunks, in my many attempts to get this to work, – monkeykong Jan 21 '22 at 19:21
Try renaming the other array to "chunks", beause now you are trying to push itself into the array which creates a recursion. https://stackoverflow.com/questions/64797162/push-an-array-into-the-same-array-javascript – Janis Huser Jan 22 '22 at 08:45

score 0 · Answer 2 · answered Jan 21 '22 at 18:56

0

You can use splice() to create an array with chunks of another array.

var input = document.querySelector('#cleartxt');
var btnClick = document.querySelector('#btn-pro');
var textarea = document.querySelector('.txtinput');

input.addEventListener('click', function() {
  textarea.value = '';
}, false);

btnClick.addEventListener('click', function() {
  var textArea = document.getElementById("txtinput");
  var lines = textArea.value.split("\n");
  let len = 11, all = []
  while (lines.length>0) all.push(lines.splice(0,len));
  document.getElementById("txtoutput").value = all[0][1];
})

<textarea id="txtinput" class="txtinput" cols="150" rows="15">
1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678910
1234567891011
123456789101112
a
ab
abc
abcd
abcde
abcdef
abcdefg
abcdefgh
abcdefghi
abcdefghij
abcdefghijk
abcdefghijkl
abcdefghijklm
abcdefghijklmnop
</textarea>
<br />
<button id="btn-pro">PROCESS</button>&nbsp;&nbsp;<button id="cleartxt">CLEAR</button>
<br />
<br />
<textarea id="txtoutput" class="txtinput" cols="150" rows="15"></textarea>

answered Jan 21 '22 at 18:56

Kinglish

23,358
3
22
43

This does not work, it outputs only the first line. – monkeykong Jan 21 '22 at 19:36
Looks like your comment was cut off. What isn't working about this solution? – Kinglish Jan 21 '22 at 19:37
Its only outputting the first line, from the text input. I want all 11 lines from input side so I can change them and then output them as different values – monkeykong Jan 21 '22 at 19:46
What im trying to do is take plain text as input. one value per line. then output it in JSON format. Im very much an amature at this programming. Trying my best, been at this for a good few hours, going through many stack overflow pages looking for solutions. – monkeykong Jan 21 '22 at 19:54
ok, that's an easy adjustment. Can you show in your question what the expected output should look like? As it is, this solution merely creates an array of arrays that have 11 lines each. It was outputting just one value as an example. Please show expeected output and we can wrap this up. – Kinglish Jan 21 '22 at 23:10

monkeykong · Answer 3 · 2022-01-23T17:15:02.080

I have figured out a solution for the original question. Taking onboard a snippet of code provided by a poster here i added a for loop and then a forEach() loop function. Though it does show an error in the console saying item[1] is undefined, the output is what i wanted to acheive. There's probably a simpler way to do this.

    <!doctype html>
    <html>
    <head>  
    </head>
    <body>

    <textarea id="txtinput" class="txtinput" cols="150" rows="15">
one
        two
        three
        four
        five
        six
        seven
        eight
        nine
        ten
        eleven
        one
        two
        three
        four
        five
        six
        seven
        eight
        nine
        ten
        eleven
        one
        two
        three
        four
        five
        six
        seven
        eight
        nine
        ten
        eleven
</textarea>
    <br />
    <button id="btn-pro">PROCESS</button>&nbsp;&nbsp;<button id="cleartxt">CLEAR</button>
    <br />
    <br />
    <textarea id="txtoutput" class="txtinput" cols="150" rows="15"></textarea>


    <script type="text/javascript">
        var input = document.querySelector('#cleartxt');
        var btnClick = document.querySelector('#btn-pro');
        var textarea = document.querySelector('.txtinput');

        input.addEventListener('click', function () {
            textarea.value = '';   
        }, false);
        //
        //
        btnClick.addEventListener('click', function () {

        var textArea = document.getElementById("txtinput");
        var lines = textArea.value.split("\n");
            
            let len = 11, all = []
            while (lines.length>0) all.push(lines.splice(0,len));
            console.log(all);
            //
            for(let i = 0; i <all.length; i++){
                
                all.forEach(function(item){
                    console.log(item);
                    var output;
                    
                    output = '\n{\n\tkeyName: "'+item[0]+'",';
                    output += '\n\tkeyName2: "'+item[1]+'",';
                    output += '\n\tkeyName3: "'+item[2]+'",';
                    output += '\n\tkeyName4: "'+item[3]+'",';
                    output += '\n\tkeyName5: "'+item[4]+'",';
                    output += '\n\tkeyName6: "'+item[5]+'",';
                    output += '\n\tkeyName7: "'+item[6]+'",';
                    output += '\n\tkeyName8: "'+item[7]+'",';
                    output += '\n\tkeyName9: "'+item[8]+'",';
                    output += '\n\tkeyName10: "'+item[9]+'",';
                    output += '\n\tkeyName11: "'+item[10]+'"';
                    output += '\n},';
                    

                    document.getElementById("txtoutput").value += output;

                }); 
            }   
        
        }, false);
        
    </body>
    </html>

Note: last comma in output need's to be removed manualy.

Can you loop through data inside another loop

3 Answers3