What is the best way to represent the below data and highlight in UI

Question

For example I have the following data,

var expectedValuesObj = [ "a.com","testid1","200.00" ];

var actualValuesObj = [
                        ["a.com","testid1","200.00"],            
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"],
                        ["b.com","testid2","200.00"],
                        ["a.com","testid1","200.00"],
                        ["c.com","testid1","200.00"],
                        ["a.com","testid1","400.00"],
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"]
                    ];

by using the above data I need compare the data with expectedValuesObj against actualValuesObj , each and every value in those objects, if found any mismatch then I have to highlight the records which are mismatching from the expectedValuesObj .

For e.g in expectedValuesObj[0] I will compare with actualValuesObj[0] , I didn't find any mismatch because actualValuesObj[0] = ["a.com","testid1","200.00"] all the values are matching with expectedValuesObj[0] = ["a.com","testid1","200.00"]. records

If any record found to be a mismatch then that record I have to highlight.

I preferring any good suggestion and idea using js, bootstrap, jquery, dataTables and laodash.

Note : For comparing two datasets, if you want you can change the dataFormat as per your comfortable, If you feel the given dataSet is not comparable.

mainPage.html

<html>
<body>
    <div id="conatiner"> This Div will have DataTable rendered by below js script file i.e File1.js , And this will Contain the child rows as well which will have the href link and I will open the new window on click of that link , it will open  the mainPage2.hmtl with File2.js loaded .</div>
</body>
<th layout:fragment="page-specific-js" th:remove="tag">

</html>

mainPage2.hmtl

<html>
    <body>
        <div id="conatiner"> Here I want render the Data which is mismatched  and and I have to highlight.  </div>
<script th:src="@{/resources/build/js/File2.js(v=${startUpTime})}" />
    </th>
    </body>
    </html>

So the logic which I'm expecting for comparing and highlighting can be in the File2.js.

File1.js

// Here I'm importing the jQuery  data tables lib's 
// implemented the script to display the Table with child rows in mainPage1.html
// I guess not necessary to add all the logic and DataTable formation here because it's a general syntax.

File2.js

var expectedValuesObj = [ "a.com","testid1","200.00" ];

var actualValuesObj = [
                        ["a.com","testid1","200.00"],            
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"],
                        ["b.com","testid2","200.00"],
                        ["a.com","testid1","200.00"],
                        ["c.com","testid1","200.00"],
                        ["a.com","testid1","400.00"],
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"]
                    ];
// By using the above object after comparison, I want to display it in mainPage2.html by highlighting the mismatch records.

This is not even valid javascript. Your objects are missing property-names. — Arg0n, Apr 05 '17 at 12:53
Updated the question, Can you please see it now. and for your information data format you can change for your comfortable . — Tanveer, Apr 05 '17 at 13:03
when you said highlight in UI, how are you displaying this content? post all your html and js so we can help — Web pundit, Apr 05 '17 at 13:09
Can you please check now I have updated the question , and I have skipped the code which is general actaully and now **File2.js** is expecting the solution for comparison and highlighting and you can use **File2.js** and **mainPage2.html** for any manipulation . @Webpandit — Tanveer, Apr 05 '17 at 13:30

What is the best way to represent the below data and highlight in UI

0 Answers0