如何在动态spreads对象中定位alt_line_id为null的项并获取home/away值

需求：给定的events数组中，每个事件的periods.num_0.spreads包含动态命名的子对象，其中某个子对象的alt_line_id为null。需要找到该子对象，获取其home和away值并渲染到HTML中。

示例数组 #

"events": [
    {
        "periods": {
            "num_0": {
                "line_id": 2250607026,
                "number": 0,
                "cutoff": "2023-09-18T23:15:00Z",
                "period_status": 1,
                "money_line": {
                    "home": 2.5,
                    "draw": null,
                    "away": 1.598
                },
                "spreads": {
                    "3.0": {
                        "hdp": 3.0,
                        "alt_line_id": null,
                        "home": 2.0,
                        "away": 1.909,
                        "max": 30000.0
                    },
                    "5.5": {
                        "hdp": 5.5,
                        "alt_line_id": 36582376056,
                        "home": 1.625,
                        "away": 2.39,
                        "max": 30000.0
                    },
                    "5.0": {
                        "hdp": 5.0,
                        "alt_line_id": 36582376059,
                        "home": 1.662,
                        "away": 2.32,
                        "max": 30000.0
                    },
                    "4.5": {
                        "hdp": 4.5,
                        "alt_line_id": 36582376062,
                        "home": 1.694,
                        "away": 2.26,
                        "max": 30000.0
                    },
                    "4.0": {
                        "hdp": 4.0,
                        "alt_line_id": 36582376064,
                        "home": 1.746,
                        "away": 2.19,
                        "max": 30000.0
                    }
                }
            }
        }
    }
]

现有代码 #

var xhr = new XMLHttpRequest();
xhr.open("GET", "odds.json", true);
xhr.getResponseHeader("Content-type", "application/json");
xhr.withCredentials = true;

xhr.onload = function() {
    const obj = JSON.parse(this.responseText);

    var out = "";
    for (let i = 0; i < obj.events.length; i++) {

        out += '<tr>'
                + '<td class="home_team">'+ obj.events[i].home +'</td>'
                + '<td class="home_moneyline">'+ obj.events[i].periods.num_0.money_line.home +'</td>'
                + '<td class="home_spreads">'+ obj.events[i].periods.num_0.spreads['my dynamic array here'].home +'</td>'
                + '<td class="home_totals">'+  +'</td>'
                + '<td class="home_totalgame">'
                    + '<div>Over <span class="htg_over">'+ obj.events[i].periods.num_0.team_total.home.over +'</span></div>'
                    + '<div>Under <span class="htg_under">'+ obj.events[i].periods.num_0.team_total.home.under +'</span></div>'
                + '</td>'
            + '</tr>'
            + '<tr>'
                + '<td class="away_team">'+ obj.events[i].away +'</td>'
                + '<td class="away_moneyline">'+ obj.events[i].periods.num_0.money_line.away +'</td>'
                + '<td class="away_spreads">'+ obj.events[i].periods.num_0.spreads['my dynamic array here'].away +'</td>'
                + '<td class="away_totals">'+  +'</td>'
                + '<td class="away_totalgame">'
                    + '<div>Over <span class="atg_over">'+ obj.events[i].periods.num_0.team_total.away.over +'</span></div>'
                    + '<div>Under <span class="atg_under">'+ obj.events[i].periods.num_0.team_total.away.under +'</span></div>'
                + '</td>'
            + '</tr>';
    }
    document.getElementById("odds-list").innerHTML = out;
}

解决方案 #

修改思路 #

1. 循环每个事件时，遍历当前事件的spreads对象，筛选出alt_line_id为null的子对象
2. 直接保存目标子对象，后续渲染时直接调用其home/away属性，无需通过动态键名访问
3. 加入空值处理逻辑，避免找不到目标子对象时出现页面报错

修改后的完整代码 #

var xhr = new XMLHttpRequest();
xhr.open("GET", "odds.json", true);
xhr.getResponseHeader("Content-type", "application/json");
xhr.withCredentials = true;

xhr.onload = function() {
    const obj = JSON.parse(this.responseText);

    var out = "";
    for (let i = 0; i < obj.events.length; i++) {
        // 获取当前事件的spreads对象
        const spreads = obj.events[i].periods.num_0.spreads;
        // 初始化目标spread变量
        let targetSpread = null;
        
        // 遍历spreads键值对，找到alt_line_id为null的子对象
        for (const [key, spread] of Object.entries(spreads)) {
            if (spread.alt_line_id === null) {
                targetSpread = spread;
                break; // 找到后立即停止遍历（假设仅存在一个符合条件的子对象）
            }
        }

        out += '<tr>'
                + '<td class="home_team">'+ obj.events[i].home +'</td>'
                + '<td class="home_moneyline">'+ obj.events[i].periods.num_0.money_line.home +'</td>'
                + '<td class="home_spreads">'+ (targetSpread?.home || '-') +'</td>'
                + '<td class="home_totals">-</td>'
                + '<td class="home_totalgame">'
                    + '<div>Over <span class="htg_over">'+ obj.events[i].periods.num_0.team_total.home.over +'</span></div>'
                    + '<div>Under <span class="htg_under">'+ obj.events[i].periods.num_0.team_total.home.under +'</span></div>'
                + '</td>'
            + '</tr>'
            + '<tr>'
                + '<td class="away_team">'+ obj.events[i].away +'</td>'
                + '<td class="away_moneyline">'+ obj.events[i].periods.num_0.money_line.away +'</td>'
                + '<td class="away_spreads">'+ (targetSpread?.away || '-') +'</td>'
                + '<td class="away_totals">-</td>'
                + '<td class="away_totalgame">'
                    + '<div>Over <span class="atg_over">'+ obj.events[i].periods.num_0.team_total.away.over +'</span></div>'
                    + '<div>Under <span class="atg_under">'+ obj.events[i].periods.num_0.team_total.away.under +'</span></div>'
                + '</td>'
            + '</tr>';
    }
    document.getElementById("odds-list").innerHTML = out;
}

关键说明 #

• Object.entries(spreads)：将对象转换为键值对数组，方便同时遍历键和对应的子对象
• 可选链targetSpread?.home：当targetSpread为null时不会触发报错，返回undefined，配合|| '-'可在找不到数据时显示默认占位符
• 遍历找到目标后立即break：提升遍历效率，若存在多个符合条件的子对象，可根据业务需求调整逻辑（比如收集所有符合条件的对象）

内容的提问来源于stack exchange，提问作者iMarkDesigns