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>
})

• javascript

• 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 4

First 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>