How to loop over a an array that is already inside a map function without duplicating the contents

Question

I have the following code with the following arrays. I want to loop through both of them and pull out some data, and put them inside a final array. I am able to do that, but the contents are duplicated. I tried reading about reduce but don't quite understand it, and am not sure if it's the right solution. I have also setup a jsfiddle

https://jsfiddle.net/anders_kitson/Lcqn6fgd/

var lineItems = [{
    id: 'li_1HyhAZHk5l44uIELgsMWqHqB',
    object: 'item',
    amount_subtotal: 7500,
    amount_total: 7500,
    currency: 'cad',
    description: 'The Spencer',
    price: [Object],
    quantity: 1
  },
  {
    id: 'li_1HyhAZHk5l44uIELeNUsiZPu',
    object: 'item',
    amount_subtotal: 7500,
    amount_total: 7500,
    currency: 'cad',
    description: 'The Gertie',
    price: [Object],
    quantity: 1
  }
]

var arr = [{
    id: 'prod_IS1wY1JvSv2CJg',
    object: 'product',
    active: true,
    attributes: [],
    created: 1606248785,
    description: 'Shelf Set',
    images: [
      'https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq'
    ],
    livemode: false,
    metadata: {},
    name: 'The Spencer',
    statement_descriptor: null,
    type: 'service',
    unit_label: null,
    updated: 1606248785
  },
  {
    id: 'prod_IS299dMnC13Ezo',
    object: 'product',
    active: true,
    attributes: [],
    created: 1606249543,
    description: 'Shelf Set',
    images: [
      'https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe'
    ],
    livemode: false,
    metadata: {},
    name: 'The Gertie',
    statement_descriptor: null,
    type: 'service',
    unit_label: null,
    updated: 1606249543
  }
];

let productArr = [];

arr.map((item) => {
  lineItems.map((line) => {
    productArr.push({
      image: item.images[0],
      name: item.name,
      price: line.amount_total,
    });
  });
});


console.log(productArr);

This is the output I get where you can see the array repeats the values, and I know I have coded it this way I just don't know how to fix it.

[{
  image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
  name: "The Spencer",
  price: 7500
}, {
  image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
  name: "The Spencer",
  price: 7500
}, {
  image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
  name: "The Gertie",
  price: 7500
}, {
  image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
  name: "The Gertie",
  price: 7500
}]

To Be more clear this is the output that I want

[{
      image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
      name: "The Spencer",
      price: 7500
    }, {
      image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
      name: "The Gertie",
      price: 7500
    }, 
]

I have tried the suggestion in the comments with the following

let b

arr.map((item) => {
  b = lineItems.map((line) => {
    return {
      image: item.images[0],
      name: item.name,
      price: line.amount_total,
    };
  });
});

but it returns the same ones twice

[{
  image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
  name: "The Gertie",
  price: 7500
}, {
  image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
  name: "The Gertie",
  price: 7500
}]

Answer 1

You can use a single map call and reference your second lineItems array either by index, if you know that the two arrays are the same length and order

const output = arr.map((o, i) => ({
  name: o.name, 
  image: o.images[0], 
  price: lineItems[i].amount_total}
));

or by using find() to retrieve the relevant object.

const outputUsingFind = arr.map(o => {
    const lineItem = lineItems.find(item => item.description === o.name);
    // ** add lineItem valid check here **
    return {
      name: o.name, 
      image: o.images[0], 
      price: lineItem.amount_total};
  });

---

var lineItems = [{amount_subtotal: 7500,amount_total: 700,description: 'The Spencer',},{amount_subtotal: 7500,amount_total: 500,description: 'The Gertie',}];
var arr = [{images: ['spencer image'],name: 'The Spencer',},{images: ['gertie image'],name: 'The Gertie'}];

// since your arrays are ordered the same you can access the second object using 
// the index passed from map.
const output = arr.map((o, i) => ({
  name: o.name, 
  image: o.images[0], 
  price: lineItems[i].amount_total}
));
console.log(output);

// if the two arrays are not in the same order you can use find() to retrieve 
// the second object by property (you'll need to check 
const outputUsingFind = arr.map(o => {
    const lineItem = lineItems.find(item => item.description === o.name);
    // ** add lineItem valid check here **
    return {
      name: o.name, 
      image: o.images[0], 
      price: lineItem.amount_total};
  });
console.log(outputUsingFind);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Although not expressed directly in your question, it seems you're looking to do a join in javascript. The only things I see relating the two are 'name' in products and 'description' in the line items. So do a loop join on that.

Here's some sample code using your example but stripped down only to what's relevant:

var lineItems =  [
    { amount_total: 7500, description: 'The Spencer' },
    { amount_total: 7500, description: 'The Gertie' }
  ]
  
var arr = [
  { images: ['Spencer Image 1'], name: 'The Spencer' },
  { images: ['Gertie Image 1'], name: 'The Gertie' }
]


let joined = arr
  .flatMap(a => lineItems.map(li => ({a, li})))
  .filter(obj => obj.a.name == obj.li.description)
  .map(obj => ({
    image: obj.a.images[0],
    name: obj.a.name,
    price: obj.li.amount_total
  }));

console.log(joined);
    

Being a loop join, it may not be that efficient. To do a hash join is a little more involved. You can look through the source code of my developing project fluent-data, or it might even be useful to you to use it directly if you can follow the documentation.