How to generate HTML text with a for loop?

Question

I have a list of expenses, I want to create a html code to iterate over all the expenses and show their name. I am not working with the DOM, I literally want to save the html code in a variable, so I can generate a pdf file with it.

This is what I tried: lets say I have this array

const spents = [{expenseName: "Pizza"},{expenseName: "Home"}]

    const testHtml = () => {
         for(let i of spents) {
            const title = `<h1>${i.expenseName}</h1>`
          }
        }
        testHtml()

This is the result I want, something like:

htmlResult = "<h1>${i.expenseName}</h1> <h1>${i.expenseName}</h1>"

by the way, This is for a react native app.

you can for one use string concatenation (you can use += operator). the other way i could think off, is just having append in the loop against the dom directly. — Bagus Tesa
– Bagus Tesa, Commented Jul 15, 2022 at 23:17
Does this answer your question? Concatenate string through for loop — Bagus Tesa
– Bagus Tesa, Commented Jul 15, 2022 at 23:19

Elnur Musazade · Accepted Answer · 2022-07-15 23:21:10Z

1

I think this will work for you.

const spents = [{expenseName: "Pizza"},{expenseName: "Home"}]

const testHtml = () => {
   let title = '';
   for(let i of spents) {
       title += `<h1>${i.expenseName}</h1>`
   }
   return title;
}
testHtml()

answered Jul 15, 2022 at 23:21

Elnur Musazade

265 bronze badges

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

Comments

Reza Saadati · Accepted Answer · 2022-07-16 00:28:39Z

0

You could use Array.prototype.reduce().

const spents = [{
  expenseName: "Pizza"
}, {
  expenseName: "Home"
}];

const result = spents.reduce((prev, curr, index) => index === 0 ? curr.expenseName : `<h1>${prev}</h1> <h1>${curr.expenseName}</h1>`, '');

document.body.append(result);

answered Jul 16, 2022 at 0:28

Reza Saadati

5,4644 gold badges33 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to generate HTML text with a for loop?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related