從文件到對象的JQuery JSON

我從jquery站點複製了這個。我正在嘗試學習如何將json數據轉換爲網頁。日期已經驗證過：http://jsonlint.com/從文件到對象的JQuery JSON

從運行我的腳本的結果是： [目標對象] [目標對象] [目標對象] [目標對象] [目標對象]

待辦事項我需要解析這些數據，或者讓JSON做到這一點。
這是我使用的代碼：

<!doctype html> 
<html> 
<head> 

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script> 

    <script type="text/javascript"> 
$.getJSON('data.json', function(data) { 
    var items = []; 

    $.each(data, function(key, val) { 
    items.push('<li id="' + key + '">' + val + '</li>'); 
    }); 

    $('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
}); 
    </script> 
</head> 
<body> 

</body> 
</html>

故障排除提示將是巨大的，當然答案將是巨大的！

data.json

[ 
    { 
     "bytes": "476.577044" 
    }, 
    { 
     "bytes": "136113.5289" 
    }, 
    { 
     "bytes": "118870.8151" 
    }, 
    { 
     "bytes": "55001.67852" 
    } 
]

的console.log（數據）響應：

[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}] 
JSON.html (line 14) 
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}] 
JSON.html (line 14) 
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}] 
JSON.html (line 14) 
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]

來源

2012-04-09 rd42

八九不離十，試試這個：（只要文件「data.json」是一個有效的文件）

$(document).ready(function(){ 
    $.getJSON('data.json', function(data) { 
     var items = []; 

     $.each(data, function(key, val) { 
     items.push('<li id="' + key + '">' + val + '</li>'); 
     }); 

     $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body'); 
    }); 
});

編輯

你的json的設置方式，$.each將迭代包含對象的外部數組。這使得key成爲一個數字索引，而val是實際的對象。隨着中說，改變$.each部分看起來像這樣：

$.each(data, function(key, val) { 
    items.push('<li id="' + key + '">' + val.bytes + '</li>'); 
});

應該做的伎倆

（旁註：ID的不應該以數字開頭）

來源

2012-04-09 14:36:11 nathanjosiah

它具有相同的效果，再加上，你沒有回答這個問題。 – 2012-04-09 14:37:32

是「數據」。json「一個真正的文件？ – nathanjosiah 2012-04-09 14:37:59

相同的結果data.json是一個真正的文件在同一臺服務器上，避免了跨域的東西在firebug中，我看到get response中有正確的數據，只是攪動了[object對象]響應每個JSON條目 – rd42 2012-04-09 14:41:17

我有同樣的問題。我通過將JSONP對象放在console.log()中，然後在Chrome的開發人員工具中查看樹來解決此問題。在那裏，我意識到「對象」只是解析器給JSON文件內所有不同對象的名稱，所以在獲取值時必須考慮這一點。

你想

$(document).ready(function(){ 
    $.getJSON('data.json', function(data) { 
     var items = []; 

     $.each(data, function(key, val) { 
     items.push('<li >' + data.object.bytes + '</li>'); 
     }); 

     $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body'); 
    }); 
});

您的數據是一個關鍵：值對內稱爲「對象的對象，它是內部數組（這是當你做$.each()什麼被循環通過）

所以你要告訴jQuery來尋找對象，然後告訴它要尋找什麼，關鍵的內心。

我沒有把任何標識的，因爲我真的不知道你想他們是什麼。難道你只是想每個具有「字節」作爲ID？ID的元素應該是唯一的（至少根據這個http://css-tricks.com/the-difference-between-id-and-class/）

如果你想要的是一個class，這樣你可以做CSS/JQuery的在整個批次，那麼你可以嘗試像'<li class ="' + object.key + '">'

來源

2012-12-06 09:47:25

對於OP，如果這是最好的答案，您能否將其標記爲這樣？謝謝。 – 2012-12-07 03:16:17

從文件到對象的JQuery JSON

回答

相關問題