CODEWITHSUNDEEP
javascriptjqueryarraysjson
Matthew Greenhalgh
Matthew Greenhalgh

Reputation: 39

Accessing data in an object generated from table rows with keys

I generated (an array of?) following object (json?) using the below code applied to a table with key identifiers for row, but I'm not sure I properly understand it. Can you give me an idea of how to access an item in this array/object using the key and the item number as an index? Using the regular variable[][] method doesn't work in this case.

The object (tableData):

key: key: 1 values: (3) […]​​ 0: "D" 1: "E"​​ 2: "F" length: 3 values: Array(3) [ "D", "E", "F" ] : {…

(etc. etc for each key)

The Javascript:

    $("#btn1").click(function(){

      var tableData = $('tr[data-key]').map(function(){
       var $row= $(this), key = $row.data('key');
        var values= $row.find(':input').map(function(){
            return this.value
        }).get();    
        return {
            key:key,
            values:values
        }
    }).get();


})

The HTML table:

<table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
 <tr data-key="1">
    <td> <input type="text" class="pull-right form-control" name="" value="D"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="E"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="F"></td>
  </tr>

   <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="H"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="I"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="J"></td>

    </tr>


       <tr data-key="3">
    <td> <input type="text" class="pull-right form-control" name="" value="K"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="L"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="M"></td>
  </tr>
  </tbody>



</table>


<button id="btn1" style="width:100px, height:100px">Click</button>

Upvotes: 0

Views: 1993

Answers (3)

Milton
Milton

Reputation: 1012

To just solve this with the code you have, you can do this:

const tableData = // tableData
const row1 = tableData[0];
const row1Values = row1.values;
const row1Value1 = row1Values[0];

So the data you have isn't that complex, it's just not very intuitive for what is a table, and the key property isn't being used.

Rather you might want to rewrite your code so that you get table data which is a two dimensional array ([][]).

$("#btn1").click(function () {
    const tableData = $('tr[data-key]').map(function () {
        const $row = $(this);
        const key = $row.data('key');

        const values = $row.find(':input').map(function () {
            return this.value;
        }).get();

        return values; // This is the only line that really changed
    }).get();
})

PS. I would recommend getting in the habit of not declaring multiple variables in the same row with the same keyword, it makes your code easier to read, for yourself and others but it's a matter of taste.

Upvotes: 1

Sifat Haque
Sifat Haque

Reputation: 6067

I've checked your data and it's an array of object. You can access any array using it's index and you can access any object value using it's property name. You can check my solution.

console.clear();

$("#btn1").click(function(){

      var tableData = $('tr[data-key]').map(function(){
       var $row= $(this), key = $row.data('key');
        var values= $row.find(':input').map(function(){
            return this.value
        }).get();    
        return {
            key:key,
            values:values
        }
    }).get();

  const firstRow = tableData[0];
  console.log('first row:', firstRow)
  console.log('key of first row:', firstRow.key)
  console.log('values of first row:', firstRow.values)
  console.log('single value from first row values:', firstRow.values[0]);
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
 <tr data-key="1">
    <td> <input type="text" class="pull-right form-control" name="" value="D"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="E"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="F"></td>
  </tr>

   <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="H"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="I"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="J"></td>

    </tr>


       <tr data-key="3">
    <td> <input type="text" class="pull-right form-control" name="" value="K"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="L"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="M"></td>
  </tr>
  </tbody>



</table>


<button id="btn1" style="width:100px, height:100px">Click</button>
  
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Upvotes: 1

Corey
Corey

Reputation: 60

.get() returns an array, rather than an object. You'd have to access the array by the index. So, if I wanted, say the F cell - it would be tableData[0].values[2].

tableData gives me the array, tableData[0] gives me an object of {key: 1, values:["D", "E", "F"]}, tableData[0].values gives me the values array of ["D", "E", "F"], tableData[0].values[2] gives me the value at index 2 of that array. Hope that helps.

Upvotes: 1

Related Questions