如何将Google PageSpeed Insight JSON结果转换为HTML

Question

I have never worked with JSON before and I am stuck at converting my results to html. I would like them to spit out as ul's and li's preferably. I have tried plugins and Jquery scripts but nothing seems to work. My assumption is that the way I am spitting out the results is incorrect, but as I said I have no idea what I am doing with server response objects.

HTML:

<input type="text" placeholder="Enter webpage URL e.g.http://www.domain.com" id="url"/>
<input type="button" id="button" value="PageSpeed Data" onclick="clicked();" />
<div id="urlerror">Please Enter a Valid URL e.g. http://www.domain.com</div>
<pre id="data"></pre>

My code to get the results:

<script>
function clicked()
{   
    document.getElementById("urlerror").style.display = 'none'; 
    var xhr = new XMLHttpRequest();
    var url = document.getElementById("url").value;
    if(url.indexOf('http://') === -1){document.getElementById("urlerror").style.display = 'block'; return;}
    var xhr =  new XMLHttpRequest();
    xhr.open("GET", "https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url="+encodeURIComponent(url)+"&key=AIzaSyAIOUFcLYeo2WN1qbPSjlMbXmLi8kmOacw&strategy=mobile");
    xhr.onload = function(){
    document.getElementById("data").innerHTML = xhr.responseText;
}
xhr.send();
}
</script>

The resulting short snippet JSON object example (not full code):

{
 "kind": "pagespeedonline#result",
 "id": "http://www.celebritynewsdaily.us/",
 "responseCode": 200,
 "title": "Celebrity News Daily | Your Daily Source for Celebrity News & Updates",
 "score": 64,
 "pageStats": {
  "numberResources": 71,
  "numberHosts": 13,
  "totalRequestBytes": "11777",
  "numberStaticResources": 35,
  "htmlResponseBytes": "235467",
  "textResponseBytes": "238",
  "cssResponseBytes": "135950",
  "imageResponseBytes": "545748",
  "javascriptResponseBytes": "762058",
  "otherResponseBytes": "107518",
  "numberJsResources": 13,
  "numberCssResources": 11
 },
  "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
  "AvoidInterstitials": {
  "localizedRuleName": "Avoid app install interstitials that hide content",
  "ruleImpact": 0.0,
  "urlBlocks": [
  {
  "header": {
  "format": "Your page does not appear to have any app install interstitials that hide a significant amount of content. Learn more about the importance of avoiding the use of app install interstitials.",
  "args": [
    {
     "type": "HYPERLINK",
     "value": "https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/avoid-interstitials"
      }
     ]
    }
   }
  ]
 }
}

Any help getting this working is greatly appreciated.

Answer 1

Once you've got the JSON string, it is easy to convert into a JavaScript object by calling JSON.parse() .

var myObject = JSON.parse(jsonString);

Once you've got the object, you can reference values within it as per a normal JS object; eg myObject.pageStats.numberResources , and use the DOM methods to insert them into DOM elements.