Вызов метода или перебор массива в HTML с помощью JSX

Question

Я столкнулся с проблемой, которой у меня никогда раньше не было, честно говоря, впервые мне пришлось написать что-то вроде этого, и решение, кажется, ускользнуло от меня.

Я использую SendGrid для отправки HTML по электронной почте через POST в express на узле. Это прекрасно работает до тех пор, пока мне не придется перебирать элементы в корзине, чтобы настроить HTML и отразить каждый элемент.

В настоящее время в HTML я могу напечатать переменную, вызвав ${req.body.data.item_name} Это прекрасно работает, но на ${req.body.data.cart} это массив предметов, которые они только что купили. Для UIX я хотел бы отобразить список всех предметов, купленных с указанием цены и количества.

Один из способов, которым я попытался это сделать, - написать вспомогательную функцию:

function iterateItems(cart){
let body = ""

cart.forEach(function(item) {
      body = body + `<p style="Margin-top: 20px;Margin-bottom: 0;">${item.name}: $${item.price} QTY: ${item.qty}</p>`
    })
}

Затем в HTML текст пытался назвать его с помощью ${this.iterateItems(req.body.data.cart)}

Это возвращается как неопределенное, и я, честно говоря, отчасти ожидал этого. Мне интересно, как лучше подойти к этому и заставить его работать.

Answer 1

Созданная вами функция возвращает undefined, потому что она return ничего не значит. Вы можете попробовать это:

function iterateItems(cart){
   let body = ""

   cart.forEach(function(item) {
      body = body + `<p style="Margin-top: 20px;Margin-bottom: 0;">${item.name}: $${item.price} QTY: ${item.qty}</p>`
   })
   return body;
}

Надеюсь, это работает для вас.

Answer 2

Попробуйте использовать карту вместо foreach, следует решить проблему