OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Yanfer Araque
  • Start date Start date
Y

Yanfer Araque

Guest
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.

Code:
//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:

Code:
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.

<p>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?</p>
<p>Here's an example of an array of fruits and a second array that contains the answer I want to apply if it match.</p>
<pre><code>//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()
</code></pre>
<p>I've been trying several days looking for an answer in youtube or forums but without success.</p>
<p>I've just found how to find one value:</p>
<pre><code>function filterByOneFruit(fruit, fruitName) {
return fruit.filter((item) => item.name=== name);

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

//Output: { name: 'apple', color: 'red', doYouLike: '' }
</code></pre>
<p>but I don't know how to find and change multiple values at the same time</p>
<p>I really apreciate if you can help me.</p>
 

Latest posts

Top