[英]Convert object to array reactjs and ramda
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. 我是React和Ramda的新手。 How to use ramda and which function i have to use to convert in array.
如何使用ramda以及我必须使用哪个函数在数组中进行转换。
I've stole some code from here: convert Object {} to array [] in javascript 我从这里偷了一些代码: 在JavaScript中将Object {}转换为array []
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! 这应该做!
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. 从内到外,这里就是它的作用:
R.values
是一样一样的Object.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. 将其传递给
R.map
并提供products
对象,我们映射products
的元素,将其替换为对每个元素中R.values
的调用。 Finally R.evolve
takes a specification object that supplies functions to run on each of its keys, and transforms and object using those functions. 最后,
R.evolve
接受一个规范对象,该对象提供要在其每个键上运行的功能,并使用这些功能进行转换和对象。
My second version is similar, still using map(values)
, but using a slightly more standard tool than Ramda's evolve
, known as lenses: 我的第二个版本是相似的,仍然使用
map(values)
,但使用一个稍微更标准的工具比Ramda的evolve
,被称为镜头:
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
. 您可以使用
R.view
访问该属性,使用R.view
对该属性进行R.set
,或使用R.over
对其进行R.over
。 There are several functions that produce lenses. 产生镜片有几种功能。 Here we use
R.lensProp
, which focuses attention on a named property of an object. 在这里,我们使用
R.lensProp
,它将注意力集中在对象的命名属性上。
Lenses are a more widely recognized tool in the functional programming world than Ramda's more proprietary, evolve
. 隐形眼镜处于函数式编程世界比Ramda的多个专有更广泛认可的工具,
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. 镜头本应专注于结构的特定部分,但要对它进行任何操作,
evolve
可让您调整结构的许多部分,但不能像镜头那样简单地进行操作。 Because you want only to adjust a single property, either approach will work here. 因为您只想调整单个属性,所以这两种方法都可以在这里使用。
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. R.values
将您的对象转换为数组,然后使用R.map
映射数组项。 You can wrap both these in R.compose
and pass your object directly to the compose function. 您可以将它们都包装在
R.compose
然后将对象直接传递到compose函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.