如何用 JS 中另一个数组匹配的对象自动填充数组中对象的空值？

Question

我一直在尝试创建一个表格，根据之前提供的信息自动填充空字段，但我不知道如何实现，你有什么想法吗？

这是一个水果数组和第二个数组的示例，其中包含我想要应用的答案（如果匹配）。

//The 'doYouLike' field is what I'm trying to fill out

const CheckingFruits = () => {
  var fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

//Taking this info I want to fill it out, but I don't know the logic to apply it
   const doILke = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Do you like?</th>
        </tr>
      </thead>
      <tbody>
        {fruits.map((fruit, id) => (
          <tr key={id}>
            <td>{fruit.name}</td>
            <td>{fruit.color}</td>
      //This is were I would like to show the answer
            <td>{fruit.doYouLike}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

CheckingFruits()

我已经尝试了几天在 youtube 或论坛中寻找答案，但没有成功。

我刚刚找到了如何找到一个值：

function filterByOneFruit(fruit, fruitName) {
    return fruit.filter((item) => item.name=== name);

const foundTheFruit= filterByOneFruit(
    fruits,'apple'
);

//Output: { name: 'apple', color: 'red', doYouLike: '' }

但我不知道如何同时查找和更改多个值

如果您能帮助我，我真的很感激。

Answer 1

循环

fruits

数组。对于每个水果，在

doILike

数组中搜索相应的水果，并复制其

answer

属性。

var fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

//Taking this info I want to fill it out, but I don't know the logic to apply it
const doILike = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];
  
fruits.forEach(f => 
    f.doYouLike = doILike.find(l => l.name == f.name)?.answer || ''
);

console.log(fruits);