getJSON在第4个元素后返回'undefined'

8qgya5xd 于 2023-11-20 发布在其他

关注(0)|答案(2)|浏览(119)

我是一个初学js的人，我试图将一个JSON文档读入一个html表格。好吧，表格创建了，它正确地填充了表格的几乎所有内容。然而，在第四个数据输入之后，最后一列都是未定义的。

信息是伪造的 *

的数据
这是我的代码

<html>
  <head>
    <link rel="stylesheet" href="mapDiv.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
    <body>
<div id = "googleMap"></div>
        <script>
            function myMap() {
            var mapProp= {
              center:new google.maps.LatLng(36.3385,-88.8503),
              zoom:5,
            };
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            }
            </script>
            
            <script src="Redacted due to api key"></script>
            <hr>
            <div class = "container">
              <div class = "table-responsive">
                <table class = "table table-bordered table-striped" id = "customerData">
                  <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>CSZ</th>
                    <th>latLang</th>
                    <th>Image</th>
                  </tr>
                </table>
              </div>
            </div>
    </body>
</html>

<script> 
  $(document).ready(function(){
    $.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data){
      var custData = '';
      $.each(data, function(key, value){
        custData += '<tr>';
        custData += '<td>' +value.name+'</td>';
        custData += '<td>' +value.address+'</td>';
        custData += '<td>' +value.cityStateZip+'</td>';
        custData += '<td>' +value.latLang+'</td>';
        custData += '<td>' +value.image+'</td>';
        custData += '</tr>';
      });
      $('#customerData').append(custData);
    });
  });
</script>

字符串
链接到json
json

JSON

来源：https://stackoverflow.com/questions/60199108/getjson-returning-undefined-after-4th-element

2条答案

按热度按时间

lf5gs5x21#

JSON数据中的某些项没有image属性。您应该检查这一点并在适当的位置显示其他内容。

custData += '<td>' +(value.image || "No image available")+'</td>';

字符串

赞(0）回复(0）举报 2023-11-20

isr3a4wc2#

只是为了澄清，我在这里粘贴了json result中的第3项和第4项：

Item3:  {
            "name": "Trina Anderson",
            "address": "112 South Niles Avenue",
            "cityStateZip": "South Bend, Indiana 46617",
            "latLang": "41.6759656:-86.24418419999999",
            "image": "./people/NDExMTAuanBn.jpg"
        }
  Item4:      {
            "name": "Stephanie Mcghee",
            "address": "2435 Beaujolais",
            "cityStateZip": "O'Fallon, Missouri 63368",
            "latLang": "38.77378059999999:-90.70446230000002"
        },

字符串
在这种情况下，item4没有image属性，因此在这种情况下，当尝试使用value.image时，它显示undefined

$.each(data, function(key, value){
        // here **value** is containing the each item from the json list at each iteration
      });

型
因此，您可以避免打印结果，也可以用默认图像或其他任何东西替换它。
举例说明：

$.each(data, function(key, value){
        custData += '<tr>';
        custData += '<td>' +value.name+'</td>';
        custData += '<td>' +value.address+'</td>';
        custData += '<td>' +value.cityStateZip+'</td>';
        custData += '<td>' +value.latLang+'</td>';
        custData += '<td>' +value.image || 'Image not exist'+'</td>';
        custData += '</tr>';
      });

型

赞(0）回复(0）举报 2023-11-20

我来回答

getJSON在第4个元素后返回'undefined'

2条答案

相关问题

热门标签

最新问答