最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript compare two arrays in map function - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

4 Answers 4

Reset to default 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>

发布评论

评论列表(0)

  1. 暂无评论