来自2个不同数据源的JS模式匹配

Question

I have 2 tables (which can increase in future) with rows like

 <table> <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>a</td> <td>12</td> </tr> <tr> <td>bb</td> <td>24</td> </tr> <tr> <td>aab</td> <td>26</td> </tr> <tr> <td>aabb</td> <td>28</td> </tr> </table> 

and

 <table> <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>ac</td> <td>22</td> </tr> <tr> <td>dc</td> <td>34</td> </tr> <tr> <td>acdc</td> <td>36</td> </tr> <tr> <td>cdcc</td> <td>38</td> </tr> </table> 

I think this can be done with JSON (with key being name and salary being value) but how can i achieve this is an issue.

I will put a value in the searchbox. I expect my program/script to show the salary according to the longest posible value entered with data fetched from both tables. For eg when in enter just a,it should show 12 but when i enter ac, it should show 22 and acdc=36 and so on. Any example in JS/React/Angular is welcome.

Answer 1

You should add HTML:

<input id="nameInput">

In clear js I'd write it like this:

const arr1 = [{ name: 'a', salary: 12 }, { name: 'bb', 'salary': 24 }];
const arr2 = [{ name: 'ac', salary: 22 }, { name: 'dc', 'salary': 34 }];

document.getElementById("nameInput").addEventListener(function() {
  // depending on what you want, you can change condition or function
  const foundValue = [ ...arr1, ...arr2].find(el => {
    return el === this.value;
  });

  // here you can do whatever you want with found value
}

Answer 2

Assuming we are fetching data from two tables and having stored in two arrays.

let table1Data = [ {name: 'a', salary: 50}, {name: 'bc', salary: 45} ];
let table2Data = [ {name: 'ac', salary: 100}, {name: 'db', salary: 20} ];

// click event on search button
document.getElementById('search-btn').addEventListener('click', () => {
    let searchInput = document.getElementById('search-input').value;

    // filtered data which has matching
    let matchedData = [...table1Data, ...table2Data]
                        .filter(record => record.name === searchInput);
    /* 
       we can chain map function to the above statement
       for further extraction of only salary key from the filtered objects
    */
}