Home How do I auto fill an empty value of an object in an array with an object that matches from another array in JS?

Questions

How do I auto fill an empty value of an object in an array with an object that matches from another array in JS?

June 25, 2024

I’ve been trying to create a table that auto fill empty fields depending of the previous information provided but I don’t know how to make it possible, do you have any idea?

Here’s an example of an array of fruits and a second array that contains the answer I want to apply if it match.

//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()

I’ve been trying several days looking for an answer in youtube or forums but without success.

I’ve just found how to find one value:

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

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

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

but I don’t know how to find and change multiple values at the same time

I really apreciate if you can help me.

>Solution :

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

const doILike = [{
    name: 'orange',
    answer: 'yes'
  },
  {
    name: 'banana',
    answer: 'no'
  },
  {
    name: 'pinneaple',
    answer: 'no'
  },
  {
    name: 'apple',
    answer: 'yes'
  },
];

fruits.forEach((fruit) => {
  const foundFruit = doILike.find((item) => item.name === fruit.name);
  if (foundFruit) {
    fruit.doYouLike = foundFruit.answer;
  }
});

const tableBody = document.querySelector('#fruitTable tbody'); // get table body


fruits.forEach((fruit) => {
  const row = document.createElement('tr'); //Create table rows for each fruit

  const nameCell = document.createElement('td');
  nameCell.textContent = fruit.name;
  row.appendChild(nameCell);

  const colorCell = document.createElement('td');
  colorCell.textContent = fruit.color; // set fruit color
  row.appendChild(colorCell);

  const likeCell = document.createElement('td');
  likeCell.textContent = fruit.doYouLike; // set fruit doYouLik
  row.appendChild(likeCell);

  tableBody.appendChild(row); // add row to body
});

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th,
td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1>Fruit </h1>
  <table id="fruitTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Color</th>
        <th>Do you like?</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>

</html>