Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts

    JavaScript arrays - Building with data from a table

    Okay so Lets say I have said table:
    PHP Code:
    <table>
        <
    thead>
            <
    tr>
                <
    th>Random</th>
                <
    th>Keys</th>
                <
    th>Values</th>
                <
    th>Random</th>
            </
    tr>
        </
    thead>
        <
    tbody>
            <
    tr>
                <
    td></td>
                <
    td>key1</td>
                <
    td>abc</td>
                <
    td></td>
            </
    tr>
            <
    tr>
                <
    td></td>
                <
    td>key2</td>
                <
    td>abc</td>
                <
    td></td>
            </
    tr>
            <
    tr>
                <
    td></td>
                <
    td>key1</td>
                <
    td>def</td>
                <
    td></td>
            </
    tr>
            <
    tr>
                <
    td></td>
                <
    td>key1</td>
                <
    td>ghi</td>
                <
    td></td>
            </
    tr>
            <
    tr>
                <
    td></td>
                <
    td>key3</td>
                <
    td>123</td>
                <
    td></td>
            </
    tr>
        </
    tbody>
    </
    table
    Now I need to build an array from this in the sense that column 2 (keys) are the keys in the main array, however the value of it is an array of the values with matching keys.

    So the table above turns into this:
    PHP Code:
    array (
      
    'key1' => 
      array (
        
    'abc',
        
    'def',
        
    'ghi',
      ),
      
    'key2' => 
      array(
        
    'abc',
      )
      
    'key3' => 
      array(
        
    '123',
      )

    I already have the jQuery setup to loop through each row, and that works just fine. I have the key set to the variable type and the value set to the variable data. The array is also being set to list, so my question is, what's the best way to format the array to begin with (so all the keys are already there to ensure they send) and then add each row to the specified array group such as in PHP it would be: $list['type'][] = $data, where the data is added to the end of the multidimensional array list, categorized under type. I've heard of .push() to do this however I'm getting undefined errors with the code.

    The way I set it up now in PHP is this:
    PHP Code:
    var list = <?php print json_encode(array('key1' => array(), 'key2' => array(), 'key3' => array())); ?>;
    Which outputs this:
    PHP Code:
    var list = {"key1":[],"key2":[],"key3":[]}; 

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    How is this html table generated in the first place? This is where an array should be made, with the source code.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    It's made with PHP doing a loop through data. The table can be added and taken away from as well. My goal is to have this in a user's settings page where the user can modify details to his or her account.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    428
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Solved this issue. The problem was I was using typeof list[key] === undefined when I should have been doing typeof list[key] == 'undefined'. Now I have it building the array properly.

    The next thing I need to do is tie this data to the form that's sent so it's all saved. If anyone has any ideas on accomplishing this that wouldd be great to hear, but for now I'll jsut go debug and do trial and error runs until I figure something out.

    Edit:
    It seems I have everything taken care of, I just built an array into a query string rather than an object, so I can pass it to the post later.

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    A variant ?
    Code:
    <body>
    <table id="tbl">
        <thead>
            <tr>
                <th>Random</th>
                <th>Keys</th>
                <th>Values</th>
                <th>Random</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>key1</td>
                <td>abc</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>key2</td>
                <td>abc</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>key1</td>
                <td>def</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>key1</td>
                <td>ghi</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>key3</td>
                <td>123</td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
    
    var tbl=document.getElementById('tbl').innerHTML.replace(/\s+/g,'');
    var newArr={};
    tbl.replace(/(key\d+)<\/td><td>([^<]+)</g,function(a,k,v){
    	if (typeof(newArr[k])!='undefined') newArr[k].push(v);
    	else newArr[k]=[v];
    })
    alert(JSON.stringify(newArr))
    
    
    </script>
    </body>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •