2017-06-02 72 views
1

大家好,我试图让这里JSON格式表数据是用我的表获取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/

+0

我希望[这](https://stackoverflow.com/questions/9927126/how-to-convert-the-following-table-to-json-with-javascript)计算器链接可以帮助你 – hasan

+0

通过字符串连接来构建JSON不是一个好主意。 sonicblis和Félix已经做到了正确的方式。 – Langdon

回答

2

只需更改以下行

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; 
} 
1

您可以转换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; 
} 
+0

嘿谢谢你的努力,但我怎么能显示的价值 的关键像名字:jhon PLZ再次看到我的问题在最后我已经显示了预期的结果 – Manav

+0

没问题。这将从任何表格创建您想要的结果,而不仅仅是您的示例中的结果。 – sonicblis

0

尝试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>

+0

感谢您的时间男子plz检查我的问题在底部寻求理想的结果。我想为所有值添加键。 – Manav

+0

这是我期待的 { “1” 的结果:{ 没有: “1”, 名称: “JHON一号”, 姓氏 “李四一” } , “2”:{ 没有: “1”, 名称: “JHON二”, 姓氏 “李四两个” } } – Manav

+0

@check我更新的答案 – XYZ

0

也许你可以使用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); 
}