Итеративная печать словаря объектов JavaScript в блоки HTML

var prod_obj = {
  "headphone_products": {
    "title": "Steelseries",
  },
  "other_products": {
    "title": "Other product",
  }
};

for (let keys in prod_obj) {
  const div = document.createElement("div");
  div.innerText = prod_obj[keys].title
  document.body.appendChild(div)
}

const prod_obj = {
  "headphone_products": {
    "title": "Steelseries",
    "image": "h-steelseries.png",
    "href": "steelseries.html"
  },
  "other_products": {
    "title": "Other product",
    "image": "h-other.png",
    "href": "other.html"
  }
};

const div = document.getElementById('insertHere');

for (let products_key in prod_obj) {
  let {title, image, href} = prod_obj[products_key];
  let html = `<p>Title: ${title}, Image: ${image}, href: ${href}</p>`;
  div.insertAdjacentHTML('beforeend', html);
}

<div id = "insertHere">
</div>

class TemplateLoader{
  constructor( id ){
    this.id=id;
    return this.create();
  };
  gettemplate(){
    return document.querySelector( 'template[ data-id = "'+this.id+'" ]' ) || false
  };
  clone(){
    let tmpl=this.gettemplate();
    return tmpl ? tmpl.content.firstElementChild.cloneNode( true ) : false;
  };
  gettarget(){
    return document.querySelector( 'div[ id = "'+this.id+'" ]' ) || false;
  };
  create(){
    let tmpl=this.clone();
    if ( tmpl ){
      let target=this.gettarget();
        target.appendChild( tmpl );
      return tmpl;
    }
    return false;
  };
};

  var prod_obj = {
    'headphone_products' : {
      'title': 'steelseries',
      'image': 'h-steelseries.png',
      'href' : 'steelseries.html'
    },
    'other_products' : {
      'title': 'other product',
      'image': 'h-other.png',
      'href' : 'other.html'
    },
    'banana':{
      'title':'curvy & yellow',
      'image':'b-a-nana.png',
      'href':'banana.html'
    }
  };

  let id='links';

  Object.keys( prod_obj ).forEach( cat => {
    let data=prod_obj[ cat ];

    let oTmpl=new TemplateLoader( id );
      oTmpl.querySelector('center > p').textContent=data.title;
      oTmpl.querySelector('div.product > img').src=['img/products',data.image].join('/');
      oTmpl.querySelector('div.product > a.link').href=data.href;
  });

<!-- regular HTML -->
<div class='container'>
  <div class='dropdown'>
    <a href='#'>TOP 3 PS5 HEADSETS<i class='fa fa-chevron-down'></i></a>
    <ul>
      <div id='links'>
        <!-- items will be populated here -->
      </div>
    </ul>
  </div>
</div>








<!-- our template that will be used to generate new content within the above, regular HTML' -->
<template data-id='links'>
  <span>
    <center>
      <p></p>
    </center>
    <div class='product'>
      <img />
      <a class='link'>Read More</a>
    </div>
  </span>
</template>

const currentProds = getProductsToShow();
updateDOM(currentProds);

function updateDOM(prod_obj) {

  // Identifies parent div
  const linksDiv = document.getElementById("links");

  // Clears parent div
  linksDiv.innerHTML = "";

  // Loops through productName (keys) in prod_obj
  const productNames = Object.keys(prod_obj);
  for (let productName of productNames) {

    // Gets details (inner object) for each product
    const details_obj = prod_obj[productName];

    // Creates, configures, and appends new elements for each product
    appendProductDetails(linksDiv, details_obj);
  }
}

function appendProductDetails(parentElement, detailsObject) {
  const
  // Gets local copies of values via "destructuring"
  { title, image, href } = detailsObject,
  path = "img/products/", // Defines path to images

    // Creates elements to add to the DOM
    productDiv = document.createElement("div"),
    titleP = document.createElement("p"),
    img = document.createElement("img"),
    anchor = document.createElement("a");

  // Configures newly created elements
  productDiv.classList.add("product");
  titleP.textContent = title;
  img.src = path + image;
  img.alt = image;
  anchor.classList.add("link");
  anchor.href = href;
  anchor.textContent = "Read More";

  // Puts children into productDiv
  productDiv.appendChild(titleP);
  productDiv.appendChild(img);
  productDiv.appendChild(anchor);

  // Attaches everything to the DOM
  parentElement.appendChild(productDiv);
}

// Provides demo data
function getProductsToShow() {
  const productsObj = {
    "headphone_products": {
      "title": "Steelseries",
      "image": "h-steelseries.png", // In img/products/
      "href": "https://stackoverflow.com"
    },
    "other_products": {
      "title": "Other product",
      "image": "h-other.png",
      "href": "https://eloquentjavascript.net/"
    }
  };
  return productsObj;
}

.container{ width: 250px; text-align: center; }
.dropdown > a{ text-decoration: none; }
p{ margin: -0.1rem 0; font-size: 1.2rem; }
.product{ padding: 0.5rem ; }
.link{ margin-left: 1rem; }

<div class = "container">
  <div class = "dropdown">
    <a href = "#">PS5 HEADSETS</a>
    <div id = "links"></div>
  </div>
</div>