Analizzare la tabella JSON in HTML usando jQuery

Sto usando il codice seguente per analizzare un file JSON, ma sto diventando indefinito in ogni colonna della tabella.Analizzare la tabella JSON in HTML usando jQuery

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var json = [{ 

    "RATE_UPLOAD_DATE": "07/01/2015 8:17 AM CT", 

    "GROUPS": [ 

     { 

     "NAME": "Conforming Fixed Rate Mortgage Purchase", 

     "PRODUCT": [ 

      { 

       "DESCR": "30 Year Fixed Rate", 

       "RATE": "4.25", 

       "APR": "4.277", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=58" 

      }, 

      { 

       "DESCR": "20 Year Fixed Rate", 

       "RATE": "4.125", 

       "APR": "4.162", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=52" 

      }, 

      { 

       "DESCR": "15 Year Fixed Rate", 

       "RATE": "3.375", 

       "APR": "3.422", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=45" 

      } 

     ] 

     }, 

     { 

     "NAME": "Conforming Adjustable Rate Mortgage Purchase", 

     "PRODUCT": [ 

      { 

       "DESCR": "3/1 Fully Amortizing ARM", 

       "RATE": "3.625", 

       "APR": "3.166", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=27" 

      }, 

      { 

       "DESCR": "5/1 Fully Amortizing ARM", 

       "RATE": "3.25", 

       "APR": "3.113", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=13" 

      }, 

      { 

       "DESCR": "7/1 Fully Amortizing ARM", 

       "RATE": "3.5", 

       "APR": "3.258", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=5" 

      }, 

      { 

       "DESCR": "10/1 Fully Amortizing ARM", 

       "RATE": "3.75", 

       "APR": "3.487", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=65" 

      } 

     ] 

     }, 

     { 

     "NAME": "Jumbo Fixed Rate Purchase", 

     "PRODUCT": [ 

      { 

       "DESCR": "30 Year Fixed Rate", 

       "RATE": "4.25", 

       "APR": "4.265", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=6" 

      }, 

      { 

       "DESCR": "15 Year Fixed Rate", 

       "RATE": "3.5", 

       "APR": "3.526", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=30" 

      } 

     ] 

     }, 

     { 

     "NAME": "Jumbo Adjustable Rate Mortgage Purchase", 

     "PRODUCT": [ 

      { 

       "DESCR": "3/1 Fully Amortizing ARM", 

       "RATE": "2.75", 

       "APR": "2.959", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=56" 

      }, 

      { 

       "DESCR": "5/1 Fully Amortizing ARM", 

       "RATE": "3", 

       "APR": "3.014", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=45" 

      }, 

      { 

       "DESCR": "7/1 Fully Amortizing ARM", 

       "RATE": "3.25", 

       "APR": "3.13", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=37" 

      }, 

      { 

       "DESCR": "5/1 Interest Only ARM", 

       "RATE": "3.125", 

       "APR": "3.055", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=13" 

      }, 

      { 

       "DESCR": "10/1 Fully Amortizing ARM", 

       "RATE": "3.5", 

       "APR": "3.32", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=22" 

      } 

     ] 

     }, 

     { 

     "NAME": "Conforming Fixed Rate Mortgage Refinance", 

     "PRODUCT": [ 

      { 

       "DESCR": "30 Year Fixed Rate", 

       "RATE": "4.375", 

       "APR": "4.402", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=62" 

      }, 

      { 

       "DESCR": "20 Year Fixed Rate", 

       "RATE": "4.25", 

       "APR": "4.287", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=55" 

      }, 

      { 

       "DESCR": "15 Year Fixed Rate", 

       "RATE": "3.5", 

       "APR": "3.547", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=47" 

      } 

     ] 

     }, 

     { 

     "NAME": "Conforming Adjustable Rate Mortgage Refinance", 

     "PRODUCT": [ 

      { 

       "DESCR": "3/1 Fully Amortizing ARM", 

       "RATE": "3.75", 

       "APR": "3.194", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=30" 

      }, 

      { 

       "DESCR": "5/1 Fully Amortizing ARM", 

       "RATE": "3.375", 

       "APR": "3.157", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=15" 

      }, 

      { 

       "DESCR": "7/1 Fully Amortizing ARM", 

       "RATE": "3.625", 

       "APR": "3.317", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=6" 

      }, 

      { 

       "DESCR": "10/1 Fully Amortizing ARM", 

       "RATE": "3.875", 

       "APR": "3.566", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=70" 

      } 

     ] 

     }, 

     { 

     "NAME": "Jumbo Fixed Rate Refinance", 

     "PRODUCT": [ 

      { 

       "DESCR": "30 Year Fixed Rate", 

       "RATE": "4.375", 

       "APR": "4.39", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=6" 

      }, 

      { 

       "DESCR": "15 Year Fixed Rate", 

       "RATE": "3.625", 

       "APR": "3.651", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=30" 

      } 

     ] 

     }, 

     { 

     "NAME": "Jumbo Adjustable Rate Mortgage Refinance", 

     "PRODUCT": [ 

      { 

       "DESCR": "3/1 Fully Amortizing ARM", 

       "RATE": "2.875", 

       "APR": "2.986", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=56" 

      }, 

      { 

       "DESCR": "5/1 Fully Amortizing ARM", 

       "RATE": "3.125", 

       "APR": "3.058", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=45" 

      }, 

      { 

       "DESCR": "7/1 Fully Amortizing ARM", 

       "RATE": "3.375", 

       "APR": "3.188", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=37" 

      }, 

      { 

       "DESCR": "5/1 Interest Only ARM", 

       "RATE": "3.25", 

       "APR": "3.097", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=13" 

      }, 

      { 

       "DESCR": "10/1 Fully Amortizing ARM", 

       "RATE": "3.625", 

       "APR": "3.397", 

       "POINTS": "0", 

       "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=22" 

      } 

     ] 

     } 

    ] 

}]; 
     var tr; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].DESCR + "</td>"); 
      tr.append("<td>" + json[i].RATE + "</td>"); 
      tr.append("<td>" + json[i].APR + "</td>"); 
      tr.append("<td>" + json[i].POINTS + "</td>"); 
      $('table').append(tr); 
     } 
    }); 
</script> 
</head> 
<body> 

<table> 
    <tr> 
     <th>PRODUCT</th> 
     <th>RATE</th> 
     <th>APR*</th> 
     <th>POINTS</th> 
    </tr> 
</table> 

</body> 
</html>

fonte

2015-07-02 Aquarius24

Controllare questo:

for (var i = 0; i < json[0]["GROUPS"].length; i++) { 
    products = json[0]["GROUPS"][i]['PRODUCT']; 
    console.log(products); 

    for (var j = 0; j < products.length; j++) { 
     console.log(products[j]); 
     tr = $('<tr/>'); 
     tr.append("<td>" + products[j]["DESCR"] + "</td>"); 
     tr.append("<td>" + products[j]["RATE"] + "</td>"); 
     tr.append("<td>" + products[j]["APR"] + "</td>"); 
     tr.append("<td>" + products[j]["POINTS"] + "</td>"); 

     $('table').append(tr); 
    } 
}

tuo json[0]["GROUPS"][i]['PRODUCT'] ha più elementi. Penso che tu voglia filmare anche quelli.

Ora spostare i dati JSON in un file esterno (notare alcun indice [0] in json['GROPS']:

$(document).ready(function() { 
    $.getJSON("https://api.myjson.com/bins/4krcq", function(json) { 
     for (var i = 0; i < json["GROUPS"].length; i++) { 
      products = json["GROUPS"][i]['PRODUCT']; 
      console.log(products); 

      for (var j = 0; j < products.length; j++) { 
       console.log(products[j]); 
       tr = $('<tr/>'); 
       tr.append("<td>" + products[j]["DESCR"] + "</td>"); 
       tr.append("<td>" + products[j]["RATE"] + "</td>"); 
       tr.append("<td>" + products[j]["APR"] + "</td>"); 
       tr.append("<td>" + products[j]["POINTS"] + "</td>"); 

       $('table').append(tr); 
      } 
     } 
    }); 
});

fonte

2015-07-02 07:29:56

grazie ..... possiamo anche noi modificare il codice in modo che possa leggere JSON da un file? – Aquarius24

controllare l'aggiornamento –

var tr; 
     for (var i = 0; i < json[0].GROUPS.length; i++) { 
      var tmp = json[0].GROUPS[i]; 
      tr = $('<tr/>'); 
      tr.append("<td>" + tmp.PRODUCT.DESCR + "</td>"); 
      tr.append("<td>" + tmp.PRODUCT.RATE + "</td>"); 
      tr.append("<td>" + tmp.PRODUCT.APR + "</td>"); 
      tr.append("<td>" + tmp.PRODUCT.POINTS + "</td>"); 
      $('table').append(tr); 
     }

fonte

2015-07-02 07:23:02 Raghavendra

sta mostrando nulla – Aquarius24

provare quello modificato – Raghavendra

Prova json[0].GROUPS[i].PRODUCT[0].DESCR invece json[i].DESCR

 var tr; 
     for (var i = 0; i < json[0].GROUPS.length; i++) { 
      console.log(json[0].GROUPS[i]) 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].DESCR + "</td>"); 
      tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].RATE + "</td>"); 
      tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].APR + "</td>"); 
      tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].POINTS + "</td>"); 
      $('table').append(tr); 
     }

Fiddle

fonte

2015-07-02 07:27:22 Manoj

sostituire lo script

var tr; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].DESCR + "</td>"); 
      tr.append("<td>" + json[i].RATE + "</td>"); 
      tr.append("<td>" + json[i].APR + "</td>"); 
      tr.append("<td>" + json[i].POINTS + "</td>"); 
      $('table').append(tr); 
     }

con

var groups = json[0].GROUPS;  
//console.log(groups); 
     var tr; 
     for (var i = 0; i < groups.length; i++) { 
      //console.log(groups[i].PRODUCT[0]); 
      tr = $('<tr/>'); 
      tr.append("<td>" + groups[i].PRODUCT[0].DESCR + "</td>"); 
      tr.append("<td>" + groups[i].PRODUCT[0].RATE + "</td>"); 
      tr.append("<td>" + groups[i].PRODUCT[0].APR + "</td>"); 
      tr.append("<td>" + groups[i].PRODUCT[0].POINTS + "</td>"); 
      $('table').append(tr); 
     } 
    });

fonte

2015-07-02 07:37:43

Prova questo fuori. Utilizza il ciclo di foreach di Jquery.

var tr; 
$.each(json.GROUPS, function(key, value) { 
     $.each(value.PRODUCT, function(key, item) { 
tr = $('<tr/>'); 
      tr.append("<td>" + item.DESCR + "</td>"); 
      tr.append("<td>" + item.RATE + "</td>"); 
      tr.append("<td>" + item.APR + "</td>"); 
      tr.append("<td>" + item.POINTS + "</td>"); 
      $('table').append(tr); 
     });    
    });

fonte

2015-07-02 07:58:36

Passare su ciascun oggetto, inserire la serie di stringhe e unirle. Aggiungi nella tabella di destinazione, è meglio.

$(document).ready(function() { 
$.getJSON(url, 
function (json) { 
    var tr=[]; 
    for (var i = 0; i < json.length; i++) { 
     tr.push('<tr>'); 
     tr.push("<td>" + json[i].DESCR + "</td>"); 
     tr.push("<td>" + json[i].RATE + "</td>"); 
     tr.push("<td>" + json[i].APR + "</td>"); 
     tr.push("<td>" + json[i].POINTS + "</td>"); 
     tr.push('</tr>'); 
    } 
    $('table').append($(tr.join(''))); 
});

vedere che Parsing JSON objects for HTML table

fonte

2015-07-02 08:02:26 Kamruzzaman

Analizzare la tabella JSON in HTML usando jQuery

risposta

Problemi correlati