Question

{
"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数组的示例。我想显示：

PHOTO_URL
用户名
消息
location.name
workout.activity_type
workout.duration
workout.distance.value
workout.distance.units

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

<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>

Answer 1

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

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

以下是完整的工作代码：

<!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>

JSON数组 - 显示数据所需的帮助

1 个答案: