我想将JSON对象中的特定内容显示为表结构吗？ 我怎样才能做到这一点？

Question

{"symbol":"DRREDDY","series":"EQ","openPrice":"3,132.00","highPrice":"3,229.90","lowPrice":"3,132.00","ltp":"3,206.35","previousPrice":"3,153.25","netPrice":"1.68","tradedQuantity":"74,165","turnoverInLakhs":"2,379.33","lastCorpAnnouncementDate":"18-Jul-2016","lastCorpAnnouncement":"Annual General Meeting\/ Dividend - Rs 20\/- PerShare"},{"symbol":"ACC","series":"EQ","openPrice":"1,567.00","highPrice":"1,606.85","lowPrice":"1,564.85","ltp":"1,594.25","previousPrice":"1,568.10","netPrice":"1.67","tradedQuantity":"1,03,292","turnoverInLakhs":"1,645.62","lastCorpAnnouncementDate":"22-Feb-2016","lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"},
{"symbol":"ACC","series":"EQ","openPrice":"1,567.00","highPrice":"1,606.85","lowPrice":"1,564.85","ltp":"1,594.25","previousPrice":"1,568.10","netPrice":"1.67","tradedQuantity":"1,03,292","turnoverInLakhs":"1,645.62","lastCorpAnnouncementDate":"22-Feb-2016","lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"}

This is the JSON object.I want to store all the symbol names, high price and low price in separate variables and display those alone in my page in table structure with symbol, high price and low price as columns? How can i do that ? Am able to acces one symbol at a time but i want all the symbols to b displayed ?

Answer 1

Try this:

var data = [{
    "symbol":"DRREDDY",
    "series":"EQ",
    "openPrice":"3,132.00",
    "highPrice":"3,229.90",
    "lowPrice":"3,132.00",
    "ltp":"3,206.35",
    "previousPrice":"3,153.25",
    "netPrice":"1.68",
    "tradedQuantity":"74,165",
    "turnoverInLakhs":"2,379.33",
    "lastCorpAnnouncementDate":"18-Jul-2016",
    "lastCorpAnnouncement":"Annual General Meeting\/ Dividend - Rs 20\/- PerShare"
    },
    ...
];

var table = $('<table>');
table.append('<thead><tr><td>symbol</td><td>highPrice</td><td>lowPrice</td></tr></thead>');
for(var i in data){
    var tr = $('<tr>');
    var td1 = '<td>' + data[i].symbol;
    var td2 = '<td>' + data[i].highPrice;
    var td3 = '<td>' + data[i].lowPrice;
    tr.append(td1,td2,td3);
    table.append(tr);
}

$('#your-panel').append(table);

There is Jsfiddle

Answer 2

assuming your objects exist in an array like below

var arr = [{
    "symbol":"DRREDDY",
    "series":"EQ",
    "openPrice":"3,132.00",
    "highPrice":"3,229.90",
    "lowPrice":"3,132.00",
    "ltp":"3,206.35",
    "previousPrice":"3,153.25",
    "netPrice":"1.68",
    "tradedQuantity":"74,165",
    "turnoverInLakhs":"2,379.33",
    "lastCorpAnnouncementDate":"18-Jul-2016",
    "lastCorpAnnouncement":"Annual General Meeting\/ Dividend - Rs 20\/- PerShare"
},
{
    "symbol":"ACC",
    "series":"EQ",
    "openPrice":"1,567.00",
    "highPrice":"1,606.85",
    "lowPrice":"1,564.85",
    "ltp":"1,594.25",
    "previousPrice":"1,568.10",
    "netPrice":"1.67",
    "tradedQuantity":"1,03,292",
    "turnoverInLakhs":"1,645.62",
    "lastCorpAnnouncementDate":"22-Feb-2016",
    "lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"
},

{
    "symbol":"ACC",
    "series":"EQ",
    "openPrice":"1,567.00",
    "highPrice":"1,606.85",
    "lowPrice":"1,564.85",
    "ltp":"1,594.25",
    "previousPrice":"1,568.10",
    "netPrice":"1.67",
    "tradedQuantity":"1,03,292",
    "turnoverInLakhs":"1,645.62",
    "lastCorpAnnouncementDate":"22-Feb-2016",
    "lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"
}]

you can loop through array to draw rows and loop through objects to draw columns like below

var tableData = ''
arr.map((x) => {
tableData += '<tr><td>' + x.highPrice + '</td><td>' + x.lowPrice + '</td></tr>';  
});
$('table').find('tbody').html(tableData)

Answer 3

Iterate list to table

var table = document.getElementById("myTable");
for(var i =0; i < data.length; i++) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML =  data[i].symbol;
    cell2.innerHTML = data[i].highPrice;
    cell3.innerHTML = data[i].lowPrice;
}

fiddle

Answer 4

You may not need to create separate array for symbol, highPrice & lowPrice.

Instead you can use forEach to loop through the json array and get each of the item

var _tbody = $('tbody');
_myJson.forEach(function(item){
var _tr = '<tr><td>'+item.symbol+'</td><td>'+item.highPrice+'</td><td>'+item.lowPrice+'</td></tr>'
_tbody+=_tr
})
$('#demoTable').append(_tbody)

JSFIDDLE

Answer 5

consider

var result= {"symbol":"DRREDDY","series":"EQ","openPrice":"3,132.00","highPrice":"3,229.90","lowPrice":"3,132.00","ltp":"3,206.35","previousPrice":"3,153.25","netPrice":"1.68","tradedQuantity":"74,165","turnoverInLakhs":"2,379.33","lastCorpAnnouncementDate":"18-Jul-2016","lastCorpAnnouncement":"Annual General Meeting\/ Dividend - Rs 20\/- PerShare"},

{"symbol":"ACC","series":"EQ","openPrice":"1,567.00","highPrice":"1,606.85","lowPrice":"1,564.85","ltp":"1,594.25","previousPrice":"1,568.10","netPrice":"1.67","tradedQuantity":"1,03,292","turnoverInLakhs":"1,645.62","lastCorpAnnouncementDate":"22-Feb-2016","lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"},
{"symbol":"ACC","series":"EQ","openPrice":"1,567.00","highPrice":"1,606.85","lowPrice":"1,564.85","ltp":"1,594.25","previousPrice":"1,568.10","netPrice":"1.67","tradedQuantity":"1,03,292","turnoverInLakhs":"1,645.62","lastCorpAnnouncementDate":"22-Feb-2016","lastCorpAnnouncement":"Dividend - Rs 6\/- Per Share"}

var low_price,high_price,symbols=[];

for(var i=0; i<result.length; i++){
low_price[i]=result[i].lowPrice;
}

to display in table u can use a display function inside the for loop like this ..

for(var i=0; i<result.length; i++){
//low_price[i]=result[i].lowPrice;
display(result[i]);
}

function display(result){
var rows='<tr>'+
'<td>'+result.symbol+'</td>'+
'<td>'+result.highPrice+'</td>'+
'<td>'+result.lowPrice+'</td>'+
'</tr>';
$('#result').append(rows);

}

In html page

<div>
<table>
<thead>
<th>Symbols</th>
<th>High price</th>
<th>Low price</th>
</thead>
<tbody id="result">
// your display function will be add rows using append function ...
</tbody>
</table>
</div

i guess ur looking for this .. otherwise sorry for the wrong information

please provide more information that u want