Convert object to array reactjs and ramda

Question

Given the following data:

    const state = {
        products: {

        newValues: {
          "1": {
            "product_id": 1,
            "name": "Product 1"
          },
          "2": {
            "product_id": 2,
            "name": "Product 2"
          },
        },
        newValuescat:{
          "61": {
            "category_id": 61,
            "name": "category name"
          }
        }
        }
}

I am new in react and ramda. How to use ramda and which function i have to use to convert in array.

Answer 1

I've stole some code from here: convert Object {} to array [] in javascript

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
var result = Object.keys(obj).map(function(key) {
  return [Number(key), obj[key]];
});

This should do it!

Answer 2

It's not quite clear to me what you want. But here's are two possible solution, based on my best guess:

 const makeArrays = R.evolve({products: R.map(R.values)}) const state = {"products": {"newValues": {"1": {"name": "Product 1", "product_id": 1}, "2": {"name": "Product 2", "product_id": 2}}, "newValuescat": {"61": {"category_id": 61, "name": "category name"}}}} console.log(makeArrays(state)) 

 <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script> 

From the inside out, here's what it does: R.values is much the same as Object.values , taking an object, thought of as a list of key-value pairs, and returning a list of just the values. Passing that to R.map and supplying that the products object, we map over the elements in products , replacing them with the call to R.values in each one. Finally R.evolve takes a specification object that supplies functions to run on each of its keys, and transforms and object using those functions.

---

My second version is similar, still using map(values) , but using a slightly more standard tool than Ramda's evolve , known as lenses:

 const makeArrays = R.over(R.lensProp('products'), R.map(R.values)) const state = {"products": {"newValues": {"1": {"name": "Product 1", "product_id": 1}, "2": {"name": "Product 2", "product_id": 2}}, "newValuescat": {"61": {"category_id": 61, "name": "category name"}}}} console.log(makeArrays(state)) 

 <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script> 

A Lens lets you focus attention on one part of a data structure, leaving the rest intact. You can access the property with R.view , mutate the property with R.set , or adjust it with R.over . There are several functions that produce lenses. Here we use R.lensProp , which focuses attention on a named property of an object.

Lenses are a more widely recognized tool in the functional programming world than Ramda's more proprietary, evolve . But they are designed for different things. Lenses are meant to focus on a specific part of a structure, but to do anything you want with it, where evolve lets you adjust many parts of a structure, but doesn't offer plain access that lenses do. Because you want only to adjust a single property, either approach will work here.

Answer 3

The simple version is:

<div>{R.compose(
  R.values,
  R.map((item: any) => renderYourJsx(item))
 )(this.props.yourData)}</div>

R.values converts your object to an array, then use R.map to map over the array items. You can wrap both these in R.compose and pass your object directly to the compose function.