解析JSON數據並打印它

我正在學習JavaScript，並且需要從URL（http://example.com?index=goog,dji）讀取數據，該數據將返回下面的字符串。現在我想打印的名稱和價值，我怎麼能這樣做使用JavaScript和HTML的HTML表格解析JSON數據並打印它

[ 
    { "id": "983582" ,"t" : ".DJI" ,"e" : "INDEXDJX" ,"l" : "15,081.47" ,"l_cur" : "15,081.47" ,"s": "0" ,"ltt":"4:35PM EDT" ,"lt" : "Aug 16, 4:35PM EDT" ,"c" : "-30.72" ,"cp" : "-0.20" ,"ccol" : "chr" }, 
    { "id": "694653" ,"t" : "GOOG" ,"e" : "NASDAQ" ,"l" : "856.91" ,"l_cur" : "856.91" ,"s": "0" ,"ltt":"4:00PM EDT" ,"lt" : "Aug 16, 4:00PM EDT" ,"c" : "-2.75" ,"cp" : "-0.32" ,"ccol" : "chr" } 
]

輸出

INDEXDJX - 15,081.47 
GOOG - 856.91

？

來源

2013-08-17 SmartDev

請發佈您迄今爲止所嘗試的內容。你可以[在MDN上學習Ajax]（https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started），如何解析JSON就可以解答[here]（http://stackoverflow.com/q/4935632/218196）以及如何處理數組/對象的答案[這裏]（http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json）。 –

純JavaScript例如，儘管使用jQuery，在薩姆的答覆中提到，比較容易

function loadJSON() {  
    var ajaxRequest; 
    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    }catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     }catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      }catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 

    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
        //IF YOU ARE NOT ABLE TO REMOVE THE // FROM THE BEGINING OF 
        //THE JSON DATA THEN YOU WILL NEED TO REMOVE IT BEFORE 
        //PARSING 
        var json = ajaxRequest.responseText".replace(/^\/\/\s/,""); 

      //Parse json to an object 
      var dataObj = JSON.parse(json); 

      //Now you can access the array of objects 
      console.log(dataObj[0].INDEXDJX); 
      console.log(dataObj[1].GOOG); 
     } 
    } 


    ajaxRequest.open("GET", "http://example.com?index=goog,dji", true); 
    ajaxRequest.send(null); 
}

來源

2013-08-17 08:41:50

真的不錯的工作..因爲它是正確答案的問題...如果它的工作原理 – 2013-08-17 08:45:28

嗨帕特里克/薩姆..我不知道，但這個也沒有工作.. – SmartDev

需要比「這是行不通的」，什麼不工作的詳細信息？你收到錯誤消息，如果是的話它們是什麼等等等等 –

儘量jQuery的它比純JavaScript更容易，因爲只需要代碼的幾行而且jQuery是也是一個javascript框架

您可以通過在頭部添加jQuery庫如下

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

實現它

下script標籤的下面的代碼

$.ajax({ 
    type: 'GET', 
    url: 'http://example.com?index=goog,dji', 
    dataType: 'json', 
    success: function (data) { 
     $.each(data, function(index, element) { 
      $('body').append($('<div>', { 
       text: element.name 
      })); 
     }); 
    } 
});

UPDATE

更精確地在你的情況下，該代碼將正常工作

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
$(document).ready(function() { 
       $.getJSON('http://example.com?index=goog,dji',function(data){ 
        $('body').empty(); 
        var html ='<table>'; 
        $.each(data, function(entryIndex, entry){ 
         $.each(entry, function(entrydataIndex, entrydata){ 
          html += '<tr>';     
          html += '<strong>'+entrydataIndex+'</strong>'+'-'+ entrydata+'<br/>';    
          html += '</tr">';          
         }); 
        }); 
        html += "</table>"; 
        $('body').append(html);      
       }); 
       return false; 

     }); 
</script> 
</head> 

<body> 
</body> 
</html>

來源

2013-08-17 08:24:24

該op要求js –

這是js。 – Lukmo

@Patsy Issa：JQuery **是** JS。你應該說：OP沒有要求JQuery :)無論如何，我懷疑OP在實現他自己的AJAX庫方面有什麼優勢，除了學習目的。 – nico

你可以做到這一點使用AJAX，我將使用jquery較短代碼 PS：「你正在使用谷歌股票，請注意，這是15分鐘從後期真正的市場」

<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
$("document").ready(function(){ 
$.ajax({url:'http://example.com?index=goog,dji',dataType: 'json',success:function(data){ 
     var result=""; 
     $.each(data,function(index,stock){ 
      result+= stock.e+" - "+stock.l_cur+"<br/>"; 
     }); 
     $("body").append("<div>"+result+"</div>"); 
}}); 
}); 
</script> 
</head> 
<body> 
Results:<br/> 
</body> 
</html>

來源

2013-08-17 08:43:35 Bakly

不宜使用jQuery 2.X但除非你知道用戶將無法使用IE 6,7,8作爲2.X不再支持這些瀏覽器，並有相當誰仍然使用的即那些以前的版本有幾個人。 –

我同意，而且我在上面的代碼中改變了它 – Bakly

解析JSON數據並打印它

回答

相關問題