How to create components from a JSON array in cycle js

Question

Given the labeled slider component example from the Cycle js web site. How would I take a JSON array of slider information objects and create a labeled slider component for each Object in the array. for example if I had an array like this

let labelSliderArray =
[
   {
    label: 'Height',
    unit: 'in',
    min: 40,
    max: 84,
    init: 50
  },
  {
    label: 'Weight',
    unit: 'ibs',
    min: 40,
    max: 84,
    init: 50
  },

   {
    label: 'Age',
    unit: 'years',
    min: 10,
    max:  65,
    init: 20
  }

]

How would I map each label object to a label component. I have tried to map each label object to IsolatedLabeledSlider, like so

const {div, input, label, h2, makeDOMDriver} = CycleDOM;
const isolate = CycleIsolate;


function intent(DOM){

  return DOM.select('.slider').events('input')
    .map(ev => ev.target.value);
 };

function model(action$, props$){

   const intialValue$ = props$.map(props => props.init).first();
   const value$ = intialValue$.concat(action$)

   const state$ = Rx.Observable.combineLatest(value$, props$, 
    (value,props) => {
      return {
        label: props.label,
        unit: props.unit,
        min: props.min,
        max: props.max,
        value: value
      }
    }

   );

   return state$
};

function view(state$){
 return  state$.map( state =>
      div('.labled-slider',
          [
            label('.label', `${state.label}: ${state.value} ${state.unit}`),
            input('.slider', {type: 'range', min: state.min, max: state.max, valeu : state.value})
          ]
      )
    )
};

function LabeledSlider(sources) {
  const change$ = intent(sources.DOM);
  const state$  = model(change$, sources.props)
  const vtree$  = view(state$)
  return {
    DOM: vtree$
  };
};


const IsolatedLabelSlider = function (sources){
  return isolate(LabeledSlider)(sources)
}

function main(sources){

let labelSliderArray =  Rx.Observable.from(
[
   {
    label: 'Height',
    unit: 'in',
    min: 40,
    max: 84,
    init: 50
  },
  {
    label: 'Weight',
    unit: 'ibs',
    min: 40,
    max: 84,
    init: 50
  },

   {
    label: 'Age',
    unit: 'years',
    min: 10,
    max:  65,
    init: 20
  }

]);
let labelSinks = labelSliderArray.map(sProps => IsolatedLabelSlider({DOM: sources.DOM,  props:  Rx.Observable.of(sProps)}) )
let labelVtree$ = labelSinks.map(l => l.DOM)

 return  {
   DOM: labelVtree$
 };
}

const drivers = {
  DOM: makeDOMDriver('#app')
}

Cycle.run(main, drivers);

But this failed, it only rendered the last object in the array any help would be great

Here is the example from the Cycle JS web site

Answer 1

Starting from the Cycle.js example, and focusing in on the main function, here's a reworking to accommodate the slider controls and values originating in an array:

function main(sources) {

  let labeledSliderArray = [
    {label: 'Weight', unit: 'kg',    min: 40,  max: 150, init: 70},
    {label: 'Height', unit: 'cm',    min: 140, max: 220, init: 170},
    {label: 'Age',    unit: 'years', min: 10,  max: 80,  init: 20}
  ];

  vtrees = labeledSliderArray.map(function (item) {
    const itemProps$ = Rx.Observable.of(item);  
    const itemSinks = IsolatedLabeledSlider({
      DOM: sources.DOM, props: itemProps$
    });
    return itemSinks.DOM;
  });

  const vtree$ = Rx.Observable.combineLatest(
    vtrees, (...vtreeargs) =>
      div(vtreeargs)
  );

  return {
    DOM: vtree$
  };
}

The labeledSliderArray is mapped over and in that loop the *Props$, *Sinks, and *VTree$ are generalized, then the resulting array is provided to combineLatest. Next, the es6 "rest parameters" operator is used to provide the list of resulting vtrees to the hyperscript div function making up the final vtree$ reactive stream.

JSBin Demo