I have two arrays and I'm trying to make a list which is like,
what fruits John, Gaby have got? list. xD
John and Gaby have their own id each and pare those two ids to the Array, Fruits. when fruitId matches to John or Gaby's juiceId, Its John or Gaby's fruits.
John : apple, orrange
Gaby : mango
Fruits = [
{fruitId: 'abc', name: 'apple'},
{fruitId: 'abc', name: 'orange'},
{fruitId: 'def', name: 'mango'},
{fruitId: 'egt', name: 'pineapple'}
]
Juices = [
{juiceId: 'abc', customer: 'John'},
{juiceId: 'def', customer: 'Gaby'}
]
I think it would be something like this??
array.map((list) => {
<div>// customer's name {list.customer}</div>
<div>// fruit's name {list.name}</div>
})
I have two arrays and I'm trying to make a list which is like,
what fruits John, Gaby have got? list. xD
John and Gaby have their own id each and pare those two ids to the Array, Fruits. when fruitId matches to John or Gaby's juiceId, Its John or Gaby's fruits.
John : apple, orrange
Gaby : mango
Fruits = [
{fruitId: 'abc', name: 'apple'},
{fruitId: 'abc', name: 'orange'},
{fruitId: 'def', name: 'mango'},
{fruitId: 'egt', name: 'pineapple'}
]
Juices = [
{juiceId: 'abc', customer: 'John'},
{juiceId: 'def', customer: 'Gaby'}
]
I think it would be something like this??
array.map((list) => {
<div>// customer's name {list.customer}</div>
<div>// fruit's name {list.name}</div>
})
Share
Improve this question
edited Nov 20, 2018 at 4:07
Phil
165k25 gold badges262 silver badges267 bronze badges
asked Nov 20, 2018 at 3:37
Mijeong WonMijeong Won
3612 gold badges6 silver badges19 bronze badges
5
- 1 Have you tried anything? Is there a particular part that you're having trouble with? – Phil Commented Nov 20, 2018 at 3:41
- 4 It would help if you would show us what you want the final output to be. – Mark Commented Nov 20, 2018 at 3:41
-
Is it correct that both apple and orange have the same
fruitId
? – 1252748 Commented Nov 20, 2018 at 3:45 - 4 The relationships do not make sense. Why is a FruitId a join on a customer? And the customer lookups are called "Juices" with "JuiceId" keys? Then the array maps to HTML instead of creating a List as originally requested. I'm not sure where to begin to answer this question. I remend you clean up the example. – P.Brian.Mackey Commented Nov 20, 2018 at 3:45
-
Your
Fruits
array would be much more usable as{ abc: ['apple', 'orange'], def: ['mango'], egt: ['pineapple'] }
– Phil Commented Nov 20, 2018 at 4:09
4 Answers
Reset to default 4First thing you're going to want is a quick way to reference fruit by fruitId
. A Map
of ids to a collection of fruit names would be perfect for this.
To create this, use Array.prototype.reduce()
.
const fruitMap = Fruits.reduce((map, { fruitId, name }) => {
let fruit = map.get(fruitId) || []
fruit.push(name)
return map.set(fruitId, fruit)
}, new Map())
then you can map your Juices
array to something more like your desired output
const array = Juices.map(({ juiceId, customer }) => ({
customer,
name: (fruitMap.get(juiceId) || []).join(', ')
}))
const Fruits =[{"fruitId":"abc","name":"apple"},{"fruitId":"abc","name":"orange"},{"fruitId":"def","name":"mango"},{"fruitId":"egt","name":"pineapple"}]
const Juices = [{"juiceId":"abc","customer":"John"},{"juiceId":"def","customer":"Gaby"}]
const fruitMap = Fruits.reduce((map, { fruitId, name }) => {
let fruit = map.get(fruitId) || []
fruit.push(name)
return map.set(fruitId, fruit)
}, new Map())
const array = Juices.map(({ juiceId, customer }) => ({
customer,
name: (fruitMap.get(juiceId) || []).join(', ')
}))
console.info(array)
If I understand your question you can reduce
the Juices and filter
the Fruits
:
const Fruits = [ {fruitId: 'abc', name: 'apple'}, {fruitId: 'abc', name: 'orange'}, {fruitId: 'def', name: 'mango'}, {fruitId: 'egt', name: 'pineapple'} ]
const Juices = [ {juiceId: 'abc', customer: 'John'}, {juiceId: 'def', customer: 'Gaby'} ]
const r = Juices.reduce((r, {customer, juiceId}) => {
r[customer] = Fruits.filter(y => y.fruitId == juiceId).map(x => x.name).join(',')
return r
}, {})
console.log(r)
console.log('John:', r.John)
console.log('Gaby:', r.Gaby)
Here's pretty simple and understandable approach for this scenario. There could be easy ways to achieve this goal, but this is pretty readable even with and doesn't need advanced javascript approaches.
const Fruits = [
{fruitId: 'abc', name: 'apple'},
{fruitId: 'abc', name: 'orange'},
{fruitId: 'def', name: 'mango'},
{fruitId: 'egt', name: 'pineapple'}
]
const Juices = [
{juiceId: 'abc', customer: 'John'},
{juiceId: 'def', customer: 'Gaby'}
]
let finalArray = []
Juices.map((juice) => {
Fruits.map((fruit) => {
if(juice.juiceId === fruit.fruitId){
finalArray.push({customer: juice.customer, fruit: fruit.name})
}
});
});
console.log(finalArray)
Your question isn't exactly clear, but this is the best I could prehend from what you're trying to ask.
function findFruits() {
var fruits = [
{fruitId: 'abc', name: 'apple'},
{fruitId: 'abc', name: 'orange'},
{fruitId: 'def', name: 'mango'},
{fruitId: 'egt', name: 'pineapple'}
];
var juices = [
{juiceId: 'abc', customer: 'John'},
{juiceId: 'def', customer: 'Gaby'}
];
var target = document.getElementById('target');
var div = document.createElement('div');
juices.forEach(juice => {
var p = document.createElement('p');
var string = `${juice.customer} likes`;
var matches = fruits.filter(fruit => fruit.fruitId === juice.juiceId);
matches.forEach(match => string += ` ${match.name}`);
p.innerHTML = string;
div.appendChild(p);
});
target.appendChild(div);
}
findFruits();
<section id="target"></section>