使用Yelp API时JSON解析异常：部分字段返回undefined

架构老林

2026-7-6

Yelp API JSON解析问题解决

问题根源

JSON结构层级错误：后端返回的Yelp响应是包含businesses数组的对象，你直接从根对象取image_url、display_phone等字段，但这些字段实际在businesses数组的第一个商家对象里。
变量引用错误：拼接HTML时，你错误使用obj.imgmain这类写法，imgmain是你定义的变量，直接用变量名即可，不需要加obj.前缀。
地址字段嵌套更深：address1不在商家对象直接层级下，而是嵌套在location对象中。

修正代码

$(document).ready(function() {
    $(document).on("click", "#search-button", function() {
        var q = escape($('#term').val());
        var start = 0;
        var page = 1;

        $.ajax({
            type: 'GET',
            url: 'api/yelp.php',
            data: { q: q, s: start, p: page },
            success: function(data) {
                var response = JSON.parse(data);
                // 取第一个商家数据，兜底空对象避免报错
                var business = response.businesses?.length ? response.businesses[0] : {};

                var name = business.name || '暂无名称';
                var imgmain = business.image_url || '';
                var phone = business.phone || '暂无电话';
                var disphone = business.display_phone || '暂无显示电话';
                var loc1 = business.location?.address1 || '暂无地址';

                $('#search-out').html(
                    `${name}</br>` +
                    `${imgmain ? `<img src="${imgmain}"/>` : ''}</br>` +
                    `${phone}</br>` +
                    `${disphone}</br>` +
                    `${loc1}`
                );
            }
        });
    });
});