skip to Main Content

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.

2

Answers


  1. Loop over the fruits array. For each fruit, search for the corresponding fruit in the doILike array, and copy its answer property.

    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);
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search