Create new jQuery Array by Comparing a Single Value in Multiple Arrays

Question

There are a lot of posts on this, but my JS chops are quite there yet to figure out a solution for my case.

I have two arrays, one is a hardcoded array (Array2 in screenshot) of Google Lat/Lng variables and the other is an array constructed by iterating over DOM elements(Array1 in screenshot). I need to compare Array2 against the dynamically created Array1 from DOM and create a new Array3 of only the Array2 objects that are found in Array1. This will be the array I iterate over to create Map Markers. Below are my code samples.

Array1

var gdata = new Array();

$("table tbody tr:gt(0)").each(function (i) {
    gdata[i] = new Array();
    $(this).children('td').each(function (ii) {
        gdata[i][ii] = $(this).text();
    });
});

Array2

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ...
]

The match should be with the texts in the first column of Array1, or with values in any column? Do you need Array1 for other purposes, or could we propose another structure? — trincot
– trincot, Commented Jan 23, 2017 at 21:45
No, no, that is not what I ask. So the matching value could be anywhere in the HTML table, not just in column 1? — trincot
– trincot, Commented Jan 23, 2017 at 21:50
@trincot I only care about the [0] position because this is the array of Lat/Lng for my markers. Both target objects are in the [0] location now and a new screenshot has been uploaded. Hopefully this makes it easier. — Charles Smith
– Charles Smith, Commented Jan 23, 2017 at 22:01

trincot · Accepted Answer · 2017-01-23 22:16:23Z

As your check seems to only deal with values in the first column of the HTML table, you don't need to read all of it in gdata, just the first column. Then, you could turn the text from that first column into an object with the texts as keys, which allows for faster look-up:

var gdata = {};
$("table tbody tr:gt(0)>td:first-child").each(function () {
    gdata[$(this).text()] = true;
});

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ['c3', 32.840777, -117.244864],
];

var array3 = markers.filter(function(row) {
    return row[0] in gdata; 
});

console.log(array3);

td, th { font-size: 9px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing=0 cellpadding=0 border=1>
   <tr>
      <th>heading</th><th>heading</th><th>heading</th>
   </tr>
   <tr>
      <td>b</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a20</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a0</td><td>123</td><td>123</td>
   </tr>
</table>

If you have ES6 support, you could use a Set and arrow functions instead:

var gdata = new Set($("table tbody tr:gt(0)>td:first-child")
                    .map( (i,td) => $(td).text()).get());

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864],
    ['c3', 32.840777, -117.244864],
];

var array3 = markers.filter( ([id]) => gdata.has(id) );

console.log(array3);

td, th { font-size: 9px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing=0 cellpadding=0 border=1>
   <tr>
      <th>heading</th><th>heading</th><th>heading</th>
   </tr>
   <tr>
      <td>b</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a20</td><td>123</td><td>123</td>
   </tr>
   <tr>
      <td>a0</td><td>123</td><td>123</td>
   </tr>
</table>

ymz · Accepted Answer · 2017-01-23 21:49:03Z

1

I think you should use something like:

var results = []; // the results array

for (var i = 0; i < markers.length; i++) // iterate for every marker key
{
   results = results.concat(gdata.filter(function(item) { return item[8] == markers[i][0]; }));
}

In js we can use the filter method in order to retrieve only a portion of a given array by a query statement.. in this case we used a comparison of every marker key against the entire gdata array.. at the end - we are concating the relevant items for each marker to the destination results array

edited Jan 23, 2017 at 21:49

answered Jan 23, 2017 at 21:40

ymz

6,9641 gold badge26 silver badges41 bronze badges

1 Comment

Heretic Monkey Over a year ago

Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See How to Answer for more information.

Malk · Accepted Answer · 2017-01-23 21:41:22Z

0

It sounds like you want to filter() the static list if any (some()) of them match the dynamic list:

var markers = [
    ['a0', 32.840801, -117.244842],
    ['a10', 32.840801, -117.244842],
    ['a20', 32.840777, -117.244864]
];

var dynamic = [
    ['a0', 32.840801, -117.244842],
    ['a0zz', 32.840801, -117.244842]
];

var found = markers.filter( m => dynamic.some( d => d[0] === m[0]) );


console.log(found)

answered Jan 23, 2017 at 21:41

Malk

12k4 gold badges35 silver badges34 bronze badges

2 Comments

Malk Over a year ago

Good question. I think you are right. The some() function would just check something like d.indexOf(m[0]) < -1

Charles Smith Over a year ago

I am getting an expression is expected at => in my IDE, even though I tried the code and it works in console.

Collectives™ on Stack Overflow

Create new jQuery Array by Comparing a Single Value in Multiple Arrays

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related