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.

This is not a duplicate of that question. First of all, it specifically asked how to do this in Ramda, with reference to React. Second of all, it's not at all clear how and if the keys "1", "2", and "61" are meant to be handled, nor what is to be made of the nested structure of the original. — Scott Sauyet, Oct 07 '18 at 20:33
It would be helpful if you can include the new shape you are expecting. — Ji Mun, May 09 '19 at 22:10

Edward Lynch · Answer 1 · 2018-10-06T13:07:58.377

0

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!

edited Oct 06 '18 at 13:07

answered Oct 06 '18 at 11:35

Edward Lynch

148
8

Sorry actually i was bit confused. Now i have updated the question which i required. – Jagveer Singh Oct 06 '18 at 12:39
Updated my answer! – Edward Lynch Oct 06 '18 at 12:54
@EdwardLynch if the question is a duplicate, please flag it to be closed rather than posting an answer. – Jared Smith Oct 06 '18 at 13:02
On mobile, how do I do that? – Edward Lynch Oct 06 '18 at 13:14

score 0 · Answer 2 · answered Oct 06 '18 at 16:54

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.

score 0 · Answer 3 · answered Jun 29 '19 at 15:54

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.

Convert object to array reactjs and ramda

3 Answers3