CODEWITHSUNDEEP
javascripthtmljson
Nightcrawler
Nightcrawler

Reputation: 1051

How to create HTML template using map()?

I'm playing around with E-commerce application. I have API call, api call returns Data like below, I want to paint all images inside products to HTML using map function, now it's returns single generated element, what I am doing wrong? thanks in advance

var Result = {
  purchases: [{
      products: [{
          product_id: 264772179145,
          name: "Acer Chromebook 315 15.6",
          image_url: "https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"
        },
        {
          product_id: 264772179145,
          name: "Acer Chromebook 315 15.6",
          image_url: "https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"
        },
      ],
      timestamp: 1618215999,
      amount: 73457
    },
    {
      products: [{
        product_id: 264772179145,
        name: "Acer Chromebook 315 15.6",
        image_url: "https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"
      }],
      timestamp: 1618216092,
      amount: 73457
    },
    {
      products: [{
        product_id: 154061997658,
        name: "adidas Wheeled Team Bag Men`s",
        image_url: "https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$_1.JPG?set_id=880000500F"
      }],
      timestamp: 1618217956,
      amount: 34566
    }
  ],
};

function getProducts() {
  var res;
  var purchases = Result.purchases.map(purchases => {
    var x = purchases.amount;
    res = purchases.products.map(el => {
      return `<div class="all-img"><img style="height:50px"; width:50px; src="${el.image_url}">
                  <div class="amount">${x}</div>
              </div>`
    })
  })
  document.getElementById("transactionBoxes").innerHTML = res.join('')
}
<div id="transactionBoxes">

</div>
<button onclick="getProducts()">append</button>

Upvotes: 1

Views: 1154

Answers (3)

ntltd
ntltd

Reputation: 66

You can improve two things here:

  1. You can nest map functions to be sure to render your whole collection
  2. style="height:50px"; width:50px; => style="height:50px; width:50px;"

    var Result = {
      purchases: [
        {
          products: [
            {
              product_id: 264772179145,
              name: 'Acer Chromebook 315 15.6',
              image_url: 'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F',
            },
            {
              product_id: 264772179145,
              name: 'Acer Chromebook 315 15.6',
              image_url: 'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F',
            },
          ],
          timestamp: 1618215999,
          amount: 73457,
        },
        {
          products: [
            {
              product_id: 264772179145,
              name: 'Acer Chromebook 315 15.6',
              image_url: 'https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F',
            }],
          timestamp: 1618216092,
          amount: 73457,
        },
        {
          products: [
            {
              product_id: 154061997658,
              name: "adidas Wheeled Team Bag Men's",
              image_url: 'https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$_1.JPG?set_id=880000500F',
            }],
          timestamp: 1618217956,
          amount: 34566,
        },
      ],
    };
    
    function getProducts() {
          var res = Result.purchases
            .map((purchases) => {
              return purchases.products
                .map((product) => {
                  return (`
                <div class="all-img">
                  <img style="height:50px; width:50px;" src="${product.image_url}" alt="${product.name}" />
                    <div class="amount">${purchases.amount}</div>
                </div>
              `)
                })
                .join('')
            })
            .join('');
          document.getElementById('transactionBoxes').innerHTML = res;
        }
    
    <div id="transactionBoxes"></div>
    <button onclick="getProducts()">append</button>

You should also read the map documentation, you tried to use it as a for/forEach function.

Upvotes: 1

a.mola
a.mola

Reputation: 4011

I shortened the function so you won't have to use the return keyword and the extra variables

var Result = {"purchases":[{"products":[{"product_id":264772179145,"name":"Acer Chromebook 315 15.6","image_url":"https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"},{"product_id":264772179145,"name":"Acer Chromebook 315 15.6","image_url":"https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"},{"product_id":264772179145,"name":"Acer Chromebook 315 15.6","image_url":"https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"},{"product_id":264772179145,"name":"Acer Chromebook 315 15.6","image_url":"https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"}],"timestamp":1618215999,"amount":73457},{"products":[{"product_id":264772179145,"name":"Acer Chromebook 315 15.6","image_url":"https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/EAcAAOSw6pJe8Lwo/$_1.JPG?set_id=880000500F"}],"timestamp":1618216092,"amount":73457},{"products":[{"product_id":154061997658,"name":"adidas Wheeled Team Bag Men`s","image_url":"https://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JYAAAOSwwRZf9n2L/$_1.JPG?set_id=880000500F"}],"timestamp":1618217956,"amount":34566}]};

function getProducts() {
  const purchases = Result.purchases.map(purchase => purchase.products.map(el => `<div class="all-img"><img style="height:50px"; width:50px; src="${el.image_url}"><div class="amount">${purchase.amount}</div></div>`).join(''));
  
  document.getElementById("transactionBoxes").innerHTML = purchases.join('');
}

document.querySelector('button').addEventListener('click', getProducts);
<div id="transactionBoxes"></div>
<button>append</button>

Upvotes: 1

Axi Gerrika
Axi Gerrika

Reputation: 13

Try surrounding the return statement with parentheses. I program in React Native and it is required to surround the return with parentheses if it has multiple lines.

res = purchases.products.map(el => {
        return (`<div class="all-img"><img style="height:50px"; width:50px; src="${el.image_url}">
                   <div class="amount">${x}</div>
                 </div>`)
    })

Upvotes: 0

Related Questions