JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="myElement">

</div>

JavaScript

var families = {"MCL Leather - Pearl":{"caption":"","swatches":{"MCL Leather - Pearl":"images\/swatch-textile-hmm-mcl-leather-pearl_im_150_crop.jpg","MCL Leather - Ivory":"images\/swatch-textile-hmm-mcl-leather-ivory_im_150_crop.jpg","MCL Leather - Almond":"images\/swatch-textile-hmm-mcl-leather-almond_im_150_crop.jpg"}},"Eames Plywood Finish - White Ash":{"caption":"Natural Ash wood finished with a process to arrest the Ash in its natural, \u0026amp;quot;freshly-cut\u0026amp;quot; state. The resulting color is a creamy white that will not yellow or golden over time.","swatches":{"A2 - White Ash":"images\/swatch-finish-hmm-eames-lounge-plywood-white-ash_im_150_crop.jpg"}}};
var myElement = document.getElementById('myElement');


for( var family in families){
	if(typeof families[family].caption !== 'undefined'){
  var myText = document.createTextNode(families[family].caption.replace(/&amp;quot;/g,'"'));
  	myElement.append(myText);
    for (var swatch in families[family].swatches){
    	console.log(swatch)
      console.log(families[family].swatches[swatch])
    }
  }
}

/*

url:http://v3.prod-live.yliving.com/_fragment?_path=_format%3Dhtml%26_locale%3Den%26_controller%3DSwatchesBundle%253ASwatches%253Aindex
product_id:herman-miller-eames-white-ash-lounge-chair-with-ottoman
name:Jonathan Lucas
email:[email protected]
phone:4158598978
street:1850 Mt Diablo Blvd #510
city:Walnut Creek
state:CA
zip:94596
swatches[]:MCL Leather - Ivory
swatches[]:A2 - White Ash

*/