<!DOCTYPE html>
<html>
<head>
<script data-require="ramda@*" data-semver="0.22.1" src="https://unpkg.com/ramda@0.22.1/dist/ramda.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
// make console.log write to the page for better in-browser experience
(function () {
var body = document.querySelector('body');
body.style['fontFamily'] = 'monospace';
body.style['fontSize'] = '2em';
console.log = function (x) { body.innerText += x + '\n'; };
}());
// const R = require('ramda')
const {prop, compose, pluck, chain, uniq} = R
const product = {
name: "Sample Data",
sizes: [
{
name: "L",
colors: [
{
name: "Red"
},
{
name: "Blue"
}
]
},
{
name: "M",
colors: [
{
name: "Green"
},
{
name: "Yellow"
}
]
},
{
name: "S",
colors: [
{
name: "Orange"
},
{
name: "Purple"
},
{
name: "Blue"
}
]
}
]
}
const getSizes = prop('sizes')
const getColors = chain(prop('colors'))
const getColorNames = pluck('name')
const getUniqueColors = compose(uniq, getColorNames, getColors, getSizes)
const result = getUniqueColors(product)
console.log(result)
/* Styles go here */