Using JQuery.map() to map two tables with corresponding data as one array

Question

I'm scraping information from a website. I am trying to get the following information from the two tables.

PlayerRank PlayerName Prizes

The information in both tables are correlated.

I then need to enter the information for each player into my database.

I'm stuck right now trying to get the information from both tables into 1 array.

I created a JSFiddle to try different things http://jsfiddle.net/drycsLjk/4/

Table One

    <table>
      <thead>
        <tr>
          <th>Rank</th>

          <th>Prizes</th>

          <th>Additional Prizes</th>
        </tr>
      </thead>

      <tbody>
        <tr class="even">
          <td>1</td>

          <td>$2.5</td>

          <td>N/A</td>
        </tr>

        <tr class="odd">
          <td>2</td>

          <td>$1.5</td>

          <td>N/A</td>
        </tr>

        <tr class="even">
          <td>3</td>

          <td>$1</td>

          <td>N/A</td>
        </tr>

        <tr class="odd">
          <td>4</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="even">
          <td>5</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="odd">
          <td>6</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="even">
          <td>7</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="odd">
          <td>8</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="even">
          <td>9</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>

        <tr class="odd">
          <td>10</td>

          <td>$0</td>

          <td>N/A</td>
        </tr>
      </tbody>
    </table>

Table Two

<table id="ranked_players">
            <thead>
             <tr><th>RANK</th>
             <th>NAME</th>
             <th>CHIPS</th>
            </tr></thead>
            <tbody>


                     <tr class="odd">
                <td>1</td>
                <td>shanghai</td>
                <td>20000.00</td>
             </tr>
                     <tr class="even">
                <td>2</td>
                <td>SOCRATES</td>
                <td>0.00</td>
             </tr>
                     <tr class="odd">
                <td>3</td>
                <td>mollypop</td>
                <td>0.00</td>
             </tr>
                     <tr class="even">
                <td>4</td>
                <td>Vegaz</td>
                <td>0.00</td>
             </tr>
                     <tr class="odd">
                <td>5</td>
                <td>aRrOwDreWLs</td>
                <td>0.00</td>
             </tr>
                     <tr class="even">
                <td>6</td>
                <td>Cheatos</td>
                <td>0.00</td>
             </tr>
                     <tr class="odd">
                <td>7</td>
                <td>easypoker</td>
                <td>0.00</td>
             </tr>
                     <tr class="even">
                <td>8</td>
                <td>YNVME</td>
                <td>0.00</td>
             </tr>
                     <tr class="odd">
                <td>9</td>
                <td>askewbowl</td>
                <td>0.00</td>
             </tr>
                     <tr class="even">
                <td>10</td>
                <td>funlv</td>
                <td>0.00</td>
             </tr>
                            </tbody>
         </table>

The JQuery

$(document).ready(function(){

                var columns = $('#ranked_players thead th').map(function() {
                  return $(this).text();
                });

                var playerTable = $('#ranked_players tbody tr').map(function(i) {
                  var row = {};
                  $(this).find('td').each(function(i) {
                    var rowName = columns[i];
                    row[rowName] = $(this).text();
                  });
                  return row;
                }).get();


                console.log(playerTable);
                var columns = $('#prize_info_container table thead th').map(function() {
                  return $(this).text();
                });
                var prizeTable = $('#prize_info_container table tbody tr').map(function(i) {
                  var row = {};
                  $(this).find('td').each(function(i) {
                    var rowName = columns[i];
                    row[rowName] = $.trim($(this).text());
                  });
                  return row;
                }).get();


                console.log(prizeTable);


            });

charlietfl · Accepted Answer · 2015-05-07 03:06:44Z

1

Several ways you could do this. You could use one map and use the index provided as argument to get the other table data to combine with the table you are mapping over....

OR

Use what you have already done and at the end use :

var results = $.extend(true, prizeTable, playerTable);

Demo using $.extend

OR

Append the cells from second table to first table then get columns and map the first table

edited May 7, 2015 at 3:06

answered May 7, 2015 at 2:13

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

IntermediateCoder Over a year ago

How do I do this without having a duplicate rank?

charlietfl Over a year ago

oh yeah..didn't notice that...give me a few minutes

charlietfl Over a year ago

really simple way is make both headings text lower case when making the columns then the same property would exist and wouldn't have to do anything else.. won't end up with 2 properties..just one. That's the way extend works...if property exists it sets first value to what second is

IntermediateCoder Over a year ago

I'm not sure how to append the cells from the first table to the second. I think I should be able to work with this. Thank you, very much.

charlietfl Over a year ago

no, doesn't matter using twice ... here's a shorter merge tables version also jsfiddle.net/drycsLjk/8

|

Collectives™ on Stack Overflow

Using JQuery.map() to map two tables with corresponding data as one array

Table One

Table Two

The JQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Table One

Table Two

The JQuery

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related