[英]Compare two array with same fields => if value is different highlight in html table
I have two set of array as response from an API, For example the server response is我有两组数组作为来自 API 的响应,例如服务器响应是
let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}]; let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}];
let latest= [{firstVal:'1.2'},{SecondVal:'4.2'}]让最新= [{firstVal:'1.2'},{SecondVal:'4.2'}]
the table will display value from latest array and logic is different value should be highlighted in bold该表将显示最新数组的值并且逻辑不同值应以粗体突出显示
| | Col1 |
列 1 | Col2 |
列2 |
| | 1.2 |
1.2 | 4.2 |
4.2 |
Let's say you're rendering a table.假设您正在渲染一张表格。 I'm assuming that's how visualizing this data would make sense.
我假设这就是可视化这些数据的意义所在。
Then you'll store your first response and store it as its and render the default table然后您将存储您的第一个响应并将其存储为它并呈现默认表
Now when you get your latest response.现在,当您收到最新回复时。 You'll start comparing row and then column wise if there is difference then the rendered value should be surrounded with a tag to make it bold.
您将开始比较行,然后按列进行比较,如果存在差异,则呈现的值应该用标记包围以使其变为粗体。 Here's a rough code
这是一个粗略的代码
Assuming a react app假设一个反应应用程序
function RenderRow({row, index, latest}){
if(latest.length < index) {
console.log("This should not be possible")
return null
}
return <tr>
{
row.map((column, c_index) => {
if(latest[index][c_index] === column){
return <td>{column}</td>
}
return <td><b> {column} </b></td>
})
}
</tr>
}
function TableBody({original, latest}) {
return <tbody>
{
original.map((row, index) =>
<RenderRow row={row} index={index} latest={latest}/>
)
}
</tbody>
}
function RenderAll(){
let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}];
let latest= [{firstVal:'1.2'},{SecondVal:'4.2'}]
return <Table latest={latest} original={original}/>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.