Develop Reference

React - How to map through an object and display values from nested keys -

I have to map through an object and display all the values from all of the object keys in a list.
The object looks like this.
const books = {
book1: ['comedy', 'action', 'romance'];
book2: ['horror', 'advanture', 'crime'];
book3: ['fantasy, 'humour', 'war'];
}
I tried to create a separate array with all the keys using Object.values like this.
const objValues = Object.values)books
but the result was like this
Array[2]
array[0]
['comedy', 'action', 'romance']
Array[2]
array[1]
['horror', 'adventure', 'crime']
so on...
I have also tried to map through this objValues array and add each value to a new array that I could map over in JSX using forEach but that didn't work.
const allValues = () => {
const res: any = [];
objValues.forEach(key: any) => {
key.forEach((value: any) => {
res.push(value);
});
});
return res;
};
How could I map through all of those values and display them in a list?
Maybe this helps.
this is how I wanted to look
{object.map((value) => {
<div>
<span>{value}</span>
</div>
})}
comedy
action
romance
horror
adventure
crime

You can use flat then map to achieve what you want, don't forget to pass an unique key to the div.
Object.values(books).flat().map(v => <div key={v}> <span>{v}</span> </div>)

Based on your description of the output, you can iterate though the object using a for in loop to index at each "book" array in the "books" object. You would then have the arrays at our disposal to map through.
Something like :
const genres = []
for(let book in books){
books[book].map(title=>{
genres.push(title)
})
}
console.log(genres)

Use Object.values and then use Set to remove duplicates, after that you can iterate using map to render in page.
const books = {
book1: ['crime', 'comedy', 'action', 'romance'],
book2: ['horror', 'advanture', 'crime'],
book3: ['fantasy', 'humour', 'war']
}
const result = [...new Set(Object.values(books).flat())];
console.log(result);
Final code will look something like this
<ul>
{
[...new Set(Object.values(books).flat())].map(item => <li key={item}> {item} </li>)
}
</ul>

How can i get array of object from this data for state and count in reactjs

I am having data file in this array of objects form[{name,state},{name,state},{name,state},{name,state},{name,state}]
I need the state data and number of people belonging to same state, for that i need an array of objects having state and it's count like [{state,count},{state, count},{state,count}]
How can i get this reactjs?

This doesnt have anything to do with ReactJS, which is a library for rendering and managing UI.
In JS you can use a .reduce function to do that. I will produce and array with [{name: string, count: number}]:
const userArray = [{name: Riya, state: US}, {name: Chris, state: DE}]
const stateArray = userArray.reduce((newArray, currentElement) => {
const stateExistsIndex = newArray.findIndex((state) => state.name === currentElement.state)
if (stateExistsIndex !== -1) {
const selectedState = newArray[stateExists]
newArray[stateExists] = { name: selectedState.name, count: selectedState.count++ }
} else {
newArray.push({ name: currentElement.name, count: 1 })
}
return newArray
}, [])
This creates a new array. It loops through the old array and pushes an element to the new array if an state doesnt already exists. If it exists it increases its count by 1. You can of course also do it in a for-of loop which might be more easily understandable.

ES6 way - Get unique values from a nested array by key

trying to improve my JS chops.
Is there a cleaner way to retrieve the property value from the array below, by key, from a nested object, removing duplicates and sorting them alphabetically?
Here's what I have:
getObjectValues(array, key){
var unique = [];
array.forEach(function(item){
item[key].forEach(function(value){
if (unique.indexOf(value) < 0) {
unique.push(value)
}
})
});
return unique.sort();
},
example array of object:
[
{ name: 'hello', value: ['a','b','c']},
{ name: 'hello', value: ['a','b','c']},
{ name: 'hello', value: ['a','b','c']}
]
expected output should be an array:
var array = ['a','b','c']

You could just use a Set, and add all the items to it:
let arr = [
{ name: 'hello', value: ['a','b','c']},
{ name: 'hello', value: ['a','b','c']},
{ name: 'hello', value: ['a','b','c']}
]
console.log(
Array.from(
new Set(
arr.reduce(
(carry, current) => [...carry, ...current.value],
[]
)
)
).sort()
)

If you need something concise, you may go as simple as that:
make use of Set to get rid of duplicates
employ Array.prototype.flatMap() (with slight touch of destructuring assignment) to extract value items from within all objects into single array
const src = [{name:'hello',value:['c','b','d']},{name:'hello',value:['e','b','c']},{name:'hello',value:['f','a','e']}],
result = [...new Set(src.flatMap(({value}) => value))].sort()
console.log(result)
.as-console-wrapper{min-height:100%;}
If you need something really fast, you may do the following:
use Array.prototype.reduce() to turn your array into Set of unique records (looping through value items with Array.prototype.forEach and doing Set.prototype.add())
spread resulting Set into array and .sort() that
const src = [{name:'hello',value:['c','b','d']},{name:'hello',value:['e','b','c']},{name:'hello',value:['f','a','e']}],
result = [...src.reduce((acc,{value}) =>
(value.forEach(acc.add, acc), acc), new Set())].sort()
console.log(result)
.as-console-wrapper{Min-height:100%;}

Filter a javascript tree without mutating the original array

I'm working on a react project where I need to filter an array of objects without mutating the original array
const array = [{
name: 'bar',
children: [{
name: 'foo',
children: [{
name: 'baz123',
}, {
name: 'baz',
}]
}]
}, {
name: 'shallowKey'
}, {
name: 'abc'
}];
For example, I want to only filter the concerned object and its children.
This is the jsfiddle
function filterData(data) {
var r = data.filter(function(o) {
if (o.children) o.children = filterData(o.children);
return o.name.length === 3;
})
return r;
}
I tried that function from a stackoverflow question, but is there a way to use that same functionality without mutating the data. Thanks

If you don't have any prototypes or functions involved within the objects a simple way to copy is to stringify original and parse it back to object
var r= JSON.parse(JSON.stringify(data)).filter(...

Array .filter() already creates a new array, you just need to fix the part where the o.children is mutated. To do that you could use .map() and simply copy all fields using Object.assign() or object spread and just assign children as the result passed through the same filter function:
function filterData(data) {
return data
.filter(obj => obj.name.length === 3) // filter array first
.map(obj => ({ // then re-map to new objects
...obj, // copy shallow fields
children: obj.children && filterData(obj.children) // filter children
}));
}

You can create a copy of your original array using a spread operator or Object.assign() function.
const arrayCopy= [...array] //spread operator
const arrayCopy = Object.assign({}, array);
Otherwise as Aaron suggested, using filter(), map(), reduce() function always returns a new array without mutating your original array.

Functional Javascript map with index

I need a functional approach to solve a very basic problem, the problem with list indexes, let me write an example with React and ramda that shows the need of an index.
const R = require('ramda');
const array = ["foo", "bar", "foobar"];
// Need to put them in a nice html li ?
// this works with a warning that you
// need a unique key to each item.
const renderList = R.map( item => <li>{item}</li> );
// we can solve it like that.
const mapIndexed = R.addIndex(R.map)
const renderListIndexed = mapIndexed((item, id) => <li key={id}>{item}</li>
All of that is cool, but I'm pretty sure the use of an indexed map is not a functional approach, let me know if I'm wrong.

I'm not sure what is Ramda doing since I'm not familiar with React stuff, but if you need an index for elements of your array, you can use basic Array.map function.
const array = ["foo", "bar", "foobar"];
array.map(function(item, index) {
return {
item: item,
id: index
}
});
which will give you an array of objects structured as:
[{ id: 0, item: "foo" }, { id: 1, item: "bar" }, { id: 2, item: "foobar" }]
Hope this helps!

Look at addIndex. There are some very good reasons why Ramda does not include it by default, but this function will mix it in for you.
Try
const renderList = R.addIndex(R.map)( item => <li>{item}</li> );