html - 有没有办法将 json 数据加载到 html 表中？

Question

如何将 json 数据加载到 Html 表中。这就是我尝试将它们添加到表中的方式，但它们不起作用。当我尝试刷新页面时，它显示我未定义表中的每个元素。

   *{
      "SOLAR_SYSTEM": {
        "PLANETS": {
          "PLANET": [
            {
              "NAME": "Mercury",
              "DISTANCE": "57.91km",
              "RADIUS": "2340km",
              "LENGTH_OF_YEAR": "0.24085",
              "DAY": "88",
              "MASS": "0.054",
              "DENSITY": "6.03"
            },
            {
              "NAME": "Venus",
              "DISTANCE": "108.21km",
              "RADIUS": "6100km",
              "LENGTH_OF_YEAR": "0.61521",
              "DAY": "230",
              "MASS": "0.814",
              "DENSITY": "5.11"
            },
            {
              "NAME": "Earth",
              "DISTANCE": "149.60",
              "RADIUS": "6371",
              "LENGTH_OF_YEAR": "1.000039",
              "DAY": "24",
              "MASS": "1.00",
              "DENSITY": "5.517",
              "SATELLITES": {
                "SATELLITE": {
                  "NAME": "Moon",
                  "DISTANCE_FROM_PLANET": "384405",
                  "ORBIT": "27.322"
                }
              }
            },
            {
              "NAME": "Mars",
              "DISTANCE": "227.9",
              "RADIUS": "3324",
              "LENGTH_OF_YEAR": "1.88089",
              "DAY": "24.5",
              "MASS": "0.107",
              "DENSITY": "4.16",
              "SATELLITES": {
                "SATELLITE": [
                  {
                    "NAME": "Phobos",
                    "DISTANCE_FROM_PLANET": "9380",
                    "ORBIT": "0.319"
                  },
                  {
                    "NAME": "Deimos",
                    "DISTANCE_FROM_PLANET": "23500",
                    "ORBIT": "1.262"
                  }
                ]
              }
            },
            {
              "NAME": "Jupiter",
              "DISTANCE": "778.3",
              "RADIUS": "69750",
              "LENGTH_OF_YEAR": "11.8653",
              "DAY": "9.8",
              "MASS": "317.4",
              "DENSITY": "1.34",
              "SATELLITES": {
                "SATELLITE": [
                  {
                    "NAME": "III Ganymede",
                    "DISTANCE_FROM_PLANET": "1070000",
                    "ORBIT": "7.155"
                  },
                  {
                    "NAME": "IV Callisto",
                    "DISTANCE_FROM_PLANET": "1882000",
                    "ORBIT": "16.689"
                  }
                ]
              }
            },
            {
              "NAME": "Saturn",
              "DISTANCE": "1428",
              "RADIUS": "58170",
              "LENGTH_OF_YEAR": "29.6501",
              "DAY": "10.2",
              "MASS": "95.0",
              "DENSITY": "0.68",
              "SATELLITES": {
                "SATELLITE": [
                  {
                    "NAME": "Titan",
                    "DISTANCE_FROM_PLANET": "1221000",
                    "ORBIT": "15.945"
                  },
                  {
                    "NAME": "Rhea",
                    "DISTANCE_FROM_PLANET": "526700",
                    "ORBIT": "4.518"
                  }
                ]
              }
            },
            {
              "NAME": "Uranus",
              "DISTANCE": "2872",
              "RADIUS": "23750",
              "LENGTH_OF_YEAR": "83.7445",
              "DAY": "10.7",
              "MASS": "14.5",
              "DENSITY": "1.55",
              "SATELLITES": {
                "SATELLITE": [
                  {
                    "NAME": "Ariel",
                    "DISTANCE_FROM_PLANET": "191700",
                    "ORBIT": "2.520"
                  },
                  {
                    "NAME": "Miranda",
                    "DISTANCE_FROM_PLANET": "1234000",
                    "ORBIT": "1.414"
                  }
                ]
              }
            },
            {
              "NAME": "Neptune",
              "DISTANCE": "4498",
              "RADIUS": "22400",
              "LENGTH_OF_YEAR": "165.951",
              "DAY": "12.7",
              "MASS": "17.6",
              "DENSITY": "2.23",
              "SATELLITES": {
                "SATELLITE": {
                  "NAME": "Triton",
                  "DISTANCE_FROM_PLANET": "353400",
                  "ORBIT": "5.877"
                }
              }
            },
            {
              "NAME": "Pluto",
              "DISTANCE": "5910",
              "RADIUS": "3000",
              "LENGTH_OF_YEAR": "247.687",
              "DAY": "6.39",
              "MASS": "0.2",
              "DENSITY": "5.2"
            }
          ]
        }
      }
    }
    
    

    
1- this is javascript section   


 <script>
        $(document).ready(function () {
           $.getJSON("Planet.json", function (data) {
    
               var planet = '';
                $.each(data, function (key, value) {
    
                    planet += '<tr>';
                    planet += '<td>' + value.Name + '</td>';
                    planet += '<td>' + value.Name + '</td>';
                    planet += '<td>' + value.DISTANCE + '</td>';
                    planet += '<td>' + value.RADIUS + '</td>';
                    planet += '<td>' + value.LENGTH_OF_YEAR + '</td>';
                    planet += '<td>' + value.DAY + '</td>';
                    planet += '<td>' + value.MASS + '</td>';
                    planet += '<td>' + value.DENSITY + '</td>';
                    // planet += '<td>' + value.SATELLITES + '</td>';
                        planet += '</tr>';
                    })
                    $('#planet_table').append(planet);
                })
            });
    
        </script>

如何将 json 数据加载到 Html 表中。这就是我尝试将它们添加到表中的方式，但它们不起作用。当我尝试刷新页面时，它显示我未定义表中的每个元素。

标签： htmljson