So I’m still learning node js and pug and the project I’m working on I want to insert each symbol onto its own line with its own element and it’s not working at all. Its sticking everything into one p tag and I’m not sure what to look up to fix it

controller

exports.getAllSymbols = async (req, res, next) => {
  const x = await axios.get(options.allStocksURL, options.allStockOptions);

  const stocks = await x.data.data[0];
  const stock = x.data.data[0].name;
  const symbol = stocks.symbol.toString();

  for (let y = 0; y <= x.data.data.length - 1; y++) {
    options.testData.push(x.data.data[y].symbol);
  }

  res.status(200).render("base", {
    StockName: stock,
    StockSym: options.testData,
  });
};

pug template

html
    head
        meta(charset='UTF-8')
        meta(name='viewport', content='width=device-width', initial-scale='1.0')
        
        link(rel='stylesheet', href='/css/style.css')
        link(rel='shortcut icon', type='image/png', href='/img/favicon.png')
        link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
        title Dashboard | #{title}

    body

        mixin symbol(text)
            div
                p #{StockSym}


        // header 
        include _header

        .parameters
            p symbol 
            p RSI 
            p Stoch 
            p StochRSI 
            p MACD

        .syms
            //- p #{StockName}
            //- p #{StockSym}
            //- p #{test}
        +symbol()


            // FOOTER
        include _footer

        script(src="/scripts/script.js") 

>Solution :

In your Pug template, you’re currently rendering all the stock symbols as a single paragraph element (p) within your symbol mixin, which is then included within your .syms div. To display each stock symbol on a new line with its own p tag, you can modify your symbol mixin as follows:

 mixin symbol
  each sym in StockSym
    p= sym

This will loop through each stock symbol in StockSym and render a new p tag with the symbol’s text. You can then include the symbol mixin in your Pug template without passing any arguments, like this:

.syms
  +symbol()

This will render a div containing a separate p tag for each stock symbol in StockSym.