0 
{
"entries": [
    {
        "id": 23931763,
        "url": "http://www.dailymile.com/entries/23931763",
        "at": "2013-07-15T21:05:39Z",
        "message": "I ran 3 miles and walked 2 miles today.",
        "comments": [],
        "likes": [],
        "user": {
            "username": "DeanaLaughli",
            "display_name": "Deana O.",
            "photo_url": "http://s3.dmimg.com/pictures/users/361413/1329826045_avatar.jpg",
            "url": "http://www.dailymile.com/people/DeanaLaughli"
        },
        "workout": {
            "activity_type": "Fitness",
            "distance": {
                "value": 5,
                "units": "miles"
            },
            "felt": "great"
        }
    },
    {
        "id": 23931680,
        "url": "http://www.dailymile.com/entries/23931680",
        "at": "2013-07-15T21:01:03Z",
        "message": "More strength training",
        "comments": [],
        "likes": [],
        "location": {
            "name": "MA"
        },
        "user": {
            "username": "Ecm2571",
            "display_name": "Eileen",
            "photo_url": "http://s3.dmimg.com/pictures/users/323833/1368556483_avatar.jpg",
            "url": "http://www.dailymile.com/people/Ecm2571"
        },
        "workout": {
            "activity_type": "Weights",
            "title": "Upper and lower body "
        }
    }
]
}

这是我通过来自 URL 的 JSONP 请求获取的 JSON 数组的示例。我正在尝试显示：

  • 照片网址
  • 用户名
  • 信息
  • 地点名称
  • 锻炼.activity_type
  • 锻炼时间
  • 锻炼距离值
  • 锻炼距离单位

但是，正如您在数组中看到的那样，有时未给出此信息，当发生这种情况时，代码会停止加载更多条目。我需要一种在没有数据加载时显示空白的方法。这是我的代码，感谢您的帮助。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>

$(function() {

var entries = [];
var workout.activity
var dmJSON = "http://api.dailymile.com/entries.json?callback=?";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
  var tblRow =      "<tr>" + 
            "<td><img src=" + f.user.photo_url + "></td>" +
            "<td>" + f.user.username + "</td>" + 
            "<td>" + f.message + "</td>" + 
            //"<td>" + f.location.name + "</td>" +
            "<td>" + f.workout.activity_type + "</td>" +
            "<td>" + f.workout.duration + "</td>" +
            "<td>" + f.workout.distance.value + f.workout.distance.units + "</td>" +
            "</tr>"
   $(tblRow).appendTo("#entrydata tbody");
});

});

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
        <th></th>
        <th>Username</th>
        <th>Message</th>
    <th>Exercise Type</th>
    <th>Duration</th>
    <th>Distance</th>
    </thead>
  <tbody>

   </tbody>
</table>

</div>
</div>

</body>

</html>
4

1 回答 1

2

首先在 chrome 中运行它并打开网络工具。一旦您的“到达”错误，您将在控制台日志中看到该错误。

您的问题是您尝试读取未定义的值。您可以通过在尝试从每个对象中读取任何值之前检查每个对象来解决它，或者使用在缺少值时返回默认值的函数。

这是一个完整的工作代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>

        /**
         * Extract the property formthe object.
         * If teh property not found it will return empty string
         */
        function getProperty(object, property) {

            if (!property) {
                return '';
            }

            var
            // Break the property to its nested properties
                    properties = property && property.split('.'),
            // the current object that we want to extract the property from
                    current = object,
                    index;

            // Loop over the properties and process them
            for (index = 0; index < properties.length; index++) {
                property = properties[index];
                // Check to see that there is a property with the given name
                if (current.hasOwnProperty(property)) {
                    current = current[property];
                } else {
                    return '... N/A ...';
                }
            }

            // If we got so far it means the the 'current' contain the needed value
            return current;
        }

        $(function () {

            var entries = [],
                    dmJSON = "http://api.dailymile.com/entries.json?callback=?";

            $.getJSON(dmJSON, function (data) {
                $.each(data.entries, function (i, f) {
                    var tblRow = "<tr>" +
                            "<td><img src=" + getProperty(f, 'user.photo_url') + "></td>" +
                            "<td>" + getProperty(f, 'user.username') + "</td>" +
                            "<td>" + getProperty(f, 'message') + "</td>" +
                        //"<td>" + f.location.name + "</td>" +
                            "<td>" + getProperty(f, 'workout.activity_type') + "</td>" +
                            "<td>" + getProperty(f, 'workout.duration') + "</td>" +
                            "<td>" + getProperty(f, 'workout.distance.value') + getProperty(f, 'workout.distance.units') + "</td>" +
                            "</tr>";

                    $(tblRow).appendTo("#entrydata tbody");
                });

            });

        });
    </script>
</head>

<body>

<div class="wrapper">
    <div class="profile">
        <table id="entrydata" border="1">
            <thead>
            <th></th>
            <th>Username</th>
            <th>Message</th>
            <th>Exercise Type</th>
            <th>Duration</th>
            <th>Distance</th>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
</div>

</body>

</html>
于 2013-07-15T22:45:32.503 回答