獲取JSON格式表數據

Question

大家好，我試圖讓這裏JSON格式表數據是用我的表

<table> 
    <thead> 
    <tr> 
     <th>srno</th> 
     <th>name</th> 
     <th>email</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Jhon One</td> 
     <td>Doe one</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Jhon two</td> 
     <td>Doe Two</td> 
    </tr> 
    </tbody> 
</table> 

<button> 
    convert 
</button> 

這我得到的結果是這樣的

{ 
    "0": { 
     "1", 
     "Jhon One", 
     "Doe one" 
    } 
    , 
    "1": { 
     "2", 
     "Jhon two", 
     "Doe Two" 
    } 
} 

以下javascript

$("button").click(function() { 
    var json = html2json(); 
    alert(json); 
}); 

function html2json() { 
    var json = '{'; 
    var otArr = []; 
    // var i = 1; 
    var tbl2 = $('table tbody tr').each(function(e) { 
    x = $(this).children(); 
    var itArr = []; 
    x.each(function() { 
     itArr.push('"' + $(this).text() + '"'); 
    }); 
    otArr.push('"' + e + '": {' + itArr.join(',') + '}'); 
    }) 
    json += otArr.join(",") + '}' 

    return json; 
} 

但我想爲每個值添加鍵，數字應該從1開始而不是0。

我有一組慾望的結果，它應該是這樣的 任何幫助表示讚賞

{ 
     "1": { 
      no: "1", 
      name:"Jhon One", 
      lastname "Doe one" 
     } 
     , 
     "2": { 
      no: "1", 
      name:"Jhon two", 
      lastname "Doe two" 
     } 

    } 

這裏是我曾嘗試fiddel鏈接

https://jsfiddle.net/k228n2bn/

Answer 1

只需更改以下行

otArr.push('"' + e + '": {' + itArr.join(',') + '}'); 

到

otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}'); 

括號將添加值作爲數字而不是字符串。

另外，爲內部對象鍵添加keys數組。

function html2json() { 
    var json = '{'; 
    var otArr = []; 
    // var i = 1; 
    var tbl2 = $('table tbody tr').each(function(e) {   
     x = $(this).children(); 
     var itArr = []; 
     var keys = ['no','name','lastname']; 
     x.each(function(i) { 
     itArr.push('"' + keys[i] + '":"' + $(this).text() + '"'); 
     }); 
     otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}'); 
    }) 
    json += otArr.join(",") + '}' 

    return json; 
} 

Answer 2

您可以轉換e爲一個數字，然後像this fiddle一樣添加一個數字。

function html2json() { 
    var json = '{'; 
    var otArr = []; 
    // var i = 1; 
    var tbl2 = $('table tbody tr').each(function(e) { 
    x = $(this).children(); 
    var itArr = []; 
    x.each(function() { 
     itArr.push('"' + $(this).text() + '"'); 
    }); 
    otArr.push('"' + (Number(e) + 1) + '": {' + itArr.join(',') + '}'); 
    }) 
    json += otArr.join(",") + '}' 

    return json; 
} 

你正在返回的json無效。如果可以簡化並確保有效的json並從任何表結構創建對象，則可能需要執行類似this fiddle的操作。

function html2json() { 
    var otArr = []; 
    var tblHeaders = Array.from($('table thead tr') 
    .children()) 
    .map(header => $(header).text()); 
    var tbl2 = $('table tbody tr').each(function(e) {   
    const values = Array.from($(this).children()); 
    const row = {}; 
    for (let i = 0; i < tblHeaders.length; i++){   
     row[tblHeaders[i]] = $(values[i]).text(); 
    } 
    otArr.push({ 
     [e+1]: row 
    })  
    }) 
    json = JSON.stringify(otArr); 
    return json; 
} 

Answer 3

嘗試e+1

變化otArr.push('"' + e + '": {' + itArr.join(',') + '}');

到
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');

$("button").click(function() { 
 
    var json = html2json(); 
 
}); 
 

 
function html2json() { 
 
    var json = '{'; 
 
    var otArr = []; 
 
    
 
    var tbl2 = $('table tbody tr').each(function(e) { 
 
    x = $(this).children(); 
 
    var itArr = []; 
 
    x.each(function(e) { 
 
    
 
     var items=''; 
 
     if(e == 0){ 
 
      items +='no : "'+ $(this).text()+'"'; 
 
      
 
     } 
 
     if(e == 1){ 
 
      items +='name : "' +$(this).text()+'"'; 
 
     } 
 
     if(e == 2){ 
 
      items +='email : "' +$(this).text()+'"'; 
 
     } 
 
     
 
     itArr.push(items); 
 
     
 
    }); 
 
    
 
    otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}'); 
 
    }) 
 
    json += otArr.join(",") + '}' 
 
alert(json); 
 
    return json; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>srno</th> 
 
     <th>name</th> 
 
     <th>email</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Jhon One</td> 
 
     <td>Doe one</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Jhon two</td> 
 
     <td>Doe Two</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button> 
 
    convert 
 
</button>

Answer 4

也許你可以使用theads作爲生成對象的關鍵字。 檢查this jsfiddle。

function html2json() { 
    var $table = $('table'); 
    var $ths = $table.find('thead>tr>th'); 
    var rows = {}; 
    $table.find('tbody>tr').each(function() { 
    var row = {}; 
    $(this).children().each(function (index) { 
     row[$ths[index].textContent] = this.textContent; 
    }); 
    rows[row.srno] = row; 
    }); 
    return JSON.stringify(rows); 
}