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 to modify Json Data on Drop down click from a table using reactjs

  • Thread starter Thread starter Biswa
  • Start date Start date
B

Biswa

Guest
`The below example is for binding the data in table with the Header Title Weight and Mapping Column. Bt Mapping column each row is a drop down with A20,A30,A40. In the table it self on dropdown change I want to call a event for that particular row it find the weigh column and the row count will be more with that weight for that drop down.

Code:
`import React , { useState }from "react";


`function App() { 

 const [data, setData] = useState([]);

   const result =        [
                        {
                            Title: "Pannel",
                            Mapping: "A20",
                            Weight:"5"
                        },
                        {
                            Title: "Fire",
                            Mapping: "A20",
                            Weight:"10"
                        },
                        {
                            Title: "Fuel",
                            Mapping: "A30",
                            Weight:"15"
                        },
                        {
                            Title: "Circuit",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Air",
                            Mapping: "A40",
                            Weight:"20"
                        },
                        {
                            Title: "Pipe",
                            Mapping: "A40",
                            Weight:"30"
                        }
               ]
        setData(result);

 return (
    <div>   
     <table>
        <thead>
           <th>Title</th>
           <th>Weight</th>
            <th>Mapping</th>
        </thead>
        <tbody>
        {data.map((item) => (
          <tr>
            <td> {item.Title}</td>
            <td>{item.weight}</td>
            <td>
                <select>
                  <option>{item.Mapping}</option>
                  <option>A20</option>
                  <option>A30</option>
                  <option>A40</option>
        </select>
      </td>
     </tr>
           ))}
       </tbody>
   </table>
   </div>    
    
 );

}

export default App;`

Code:
I am using react for binding the data in html table from the json data.

The result is showing in a table with value and for Mapping column the value is binded in drop down with A20,A30,A40.

How can I make a josn   when I change in 2nd row dropdown value from A20 to A30 ,then one more row will Add as A30 and A20 row will reduce and similarly when I change in 5th row dropdown value from A40 to A20 ,then one more row will Add as A20 and A40 row will reduce

So A20 row will be 2 and A30 rows will be 3 and A40 rows will be 1 and the Json will become

Code:
        var Finalresult = [
                            {
                            Title: "Pannel",
                            Mapping: "A20",
                            Weight:"5"
                            },
                        {
                            Title: "Fire",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Fuel",
                            Mapping: "A30",
                            Weight:"15"
                        },
                        {
                            Title: "Circuit",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Air",
                            Mapping: "A20",
                            Weight:"20"
                        },
                        {
                            Title: "Pipe",
                            Mapping: "A40",
                            Weight:"30"
                        } 
               ]
    What changes I have to do in html table to modify the json data`

<p>`The below example is for binding the data in table with the Header Title Weight and Mapping Column.
Bt Mapping column each row is a drop down with A20,A30,A40.
In the table it self on dropdown change I want to call a event for that particular row it find the weigh column and the row count will be more with that weight for that drop down.</p>
<pre><code>`import React , { useState }from "react";


`function App() {

const [data, setData] = useState([]);

const result = [
{
Title: "Pannel",
Mapping: "A20",
Weight:"5"
},
{
Title: "Fire",
Mapping: "A20",
Weight:"10"
},
{
Title: "Fuel",
Mapping: "A30",
Weight:"15"
},
{
Title: "Circuit",
Mapping: "A30",
Weight:"10"
},
{
Title: "Air",
Mapping: "A40",
Weight:"20"
},
{
Title: "Pipe",
Mapping: "A40",
Weight:"30"
}
]
setData(result);

return (
<div>
<table>
<thead>
<th>Title</th>
<th>Weight</th>
<th>Mapping</th>
</thead>
<tbody>
{data.map((item) => (
<tr>
<td> {item.Title}</td>
<td>{item.weight}</td>
<td>
<select>
<option>{item.Mapping}</option>
<option>A20</option>
<option>A30</option>
<option>A40</option>
</select>
</td>
</tr>
))}
</tbody>
</table>
</div>

);
</code></pre>
<p>}</p>
<p>export default App;`</p>
<pre><code>I am using react for binding the data in html table from the json data.

The result is showing in a table with value and for Mapping column the value is binded in drop down with A20,A30,A40.

How can I make a josn when I change in 2nd row dropdown value from A20 to A30 ,then one more row will Add as A30 and A20 row will reduce and similarly when I change in 5th row dropdown value from A40 to A20 ,then one more row will Add as A20 and A40 row will reduce

</code></pre>
<p>So A20 row will be 2 and A30 rows will be 3 and A40 rows will be 1 and the Json will become</p>
<pre><code> var Finalresult = [
{
Title: "Pannel",
Mapping: "A20",
Weight:"5"
},
{
Title: "Fire",
Mapping: "A30",
Weight:"10"
},
{
Title: "Fuel",
Mapping: "A30",
Weight:"15"
},
{
Title: "Circuit",
Mapping: "A30",
Weight:"10"
},
{
Title: "Air",
Mapping: "A20",
Weight:"20"
},
{
Title: "Pipe",
Mapping: "A40",
Weight:"30"
}
]
What changes I have to do in html table to modify the json data`
</code></pre>
 

Latest posts

Top