javascript printing array into paragraphs

Question

I am trying to make a local html to display some text from txt file (also local). I used this to read file into array and print it:

<input type="file" name="files" id="inputfile">
<script type="text/javascript"> 
document.getElementById('inputfile')
.addEventListener('change', function() {
    var test=new FileReader();
    test.onload=function(){
        document.getElementById('output')
                .textContent=fl.result;
    }
    test.readAsText(this.files[0]);
})
</script>

However, I would like to print it from the array into paragraphs, line by line (first line goes into heading, second into paragraph, third into heading and so on...). Is there a way to do it automaticaly from an array, or would I have to do it by hand for each one? I am kinda green in javascript so I would rather refrain from using node etc.

You can loop through your array and define which index belongs to which section, such as 0 = header, 1 = paragraph, 2 = heading, > 2 = the rest, etc. — Hanlet Escaño
– Hanlet Escaño, Commented Oct 13, 2021 at 19:21
"first line goes into heading, second into paragraph, third into heading and so on..." Is it always going to be strictly alternating header, paragraph, header, paragraph? If there might sometimes be two paragraphs for a given header you'll need something other than just array position to indicate that. — Daniel Beck
– Daniel Beck, Commented Oct 13, 2021 at 19:23
@Daniel It is always going to be like that. It's pretty much title and description — OnionOfDoom
– OnionOfDoom, Commented Oct 13, 2021 at 19:26

Daniel Beck · Accepted Answer · 2021-10-13 19:30:41Z

2

If the headers and paragraphs are always strictly alternating, you can check whether each array index is odd or even to decide whether to wrap it in header or paragraph tags. One way:

arr = ["header", "paragraph", "header", "paragraph", "header", "paragraph"]

joined = arr.map((el, i) => {
  return (i % 2 === 0) ? `<h1>${el}</h1>` : `<p>${el}</p>` ;
}).join('')

console.log(joined)

answered Oct 13, 2021 at 19:30

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

Comments

navnath · Accepted Answer · 2021-10-13 19:32:45Z

0

const arr = ['Heading 1','Para1','Heading 2','Para2','Heading 3','Para3'];

const result = arr.map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join('');
document.getElementById('output').innerHTML = result ;

<div id="output"></div>

answered Oct 13, 2021 at 19:32

navnath

3,7241 gold badge13 silver badges20 bronze badges

4 Comments

OnionOfDoom Over a year ago

I am not sure what am I doing wrong, but it does break apart when wraping into header, just after odd or even part. For some reason "<h1>" and entire last line is treated as simple text, not a code

navnath Over a year ago

share error and code which breaks

navnath Over a year ago

@OnionOfDoom make sure you use innerHTML. It will be easy if you share content from file which breaks

OnionOfDoom Over a year ago

Nevermind, it does actually work just like I wanted to, I jsut made a mistake while typing it in. So thanks a lot

Major_Flux- · Accepted Answer · 2021-10-13 19:31:10Z

0

Put this in your code:

function arrToPar(arr){ //For JS-Array --> HTML content
    var out = "";
    for(var i = 0; i < arr.length; i++){
        out += arr[i] + "<br>";
    }
    return(out);
}

Or...

function arrToString(arr,joiner = " "){ //For JS-Array --> JS-String
    var out = ""; //The parameter "joiner", by default, is a space
    //This means that you only need to specify "arr", but you can do
    //a second parameter. This function behaves like arr.join(joiner).
    for(var i = 0; i < arr.length; i++){
        out += arr[i] + joiner;
    }
}

answered Oct 13, 2021 at 19:31

Major_Flux-

1481 silver badge9 bronze badges

2 Comments

Daniel Beck Over a year ago

Your second example is equivalent to arr.join(" "), probably not necessary to reinvent that. (But note that they asked for different output than you're producing).

Dinith Rukshan Kumara Over a year ago

1st method worked for render array of strings convert in to single paragraph with my custom format. Thanks!

Collectives™ on Stack Overflow

javascript printing array into paragraphs

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related