javascript - 无法将 JSON 文件数据作为 mediaElement.js 中参数之一的数组加载

Question

我正在使用 MediaElement.js 库向音频时间线添加标记。我正在尝试从 JSON 文件中获取数据，将其转换为数组并(未成功)将其用作参数之一。

我的JSON数据如下:

{
    "StartTimeInMin": "0",
    "EndTimeInMin": "60",
    "event": [{
        "EventTimeMin": "4",
        "EventType": "1"
    }, {
        "EventTimeMin": "10",
        "EventType": "2"
    }]
}

也可以通过以下方式访问:https://api.myjson.com/bins/y2v0k

我的获取数据的代码:

let minuteMarkers = [];

function getJson() {
    fetch("https://api.myjson.com/bins/y2v0k")
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            parsingdata = JSON.parse(data);
            console.log(parsingdata);
            jsondata = data.event;
            jsondata.forEach(function (e) {
                minuteMarkers.push(e.EventTimeMin);
                return minuteMarkers;
            });
        })
        .catch(function (err) {
            console.log(err);
        });
}

getJson();

console.log(minuteMarkers);

let player = new MediaElementPlayer("player2", {
    features: [
        "playpause",
        "current",
        "progress",
        "duration",
        "markers",
        "fullscreen"
    ],
    // markers: ["4", "14"], <- it works
    markers: minuteMarkers, // <- This does not work !
    markerColor: "#00FF00",
    markerCallback: function (media, time) {
        alert(time);
    }
});

当我执行console.log(monthMarkers)时，我得到了[]结果。我期待得到 ["4", "10"]。

我能想到的问题之一是:在“player”变量运行后获取数据给我。因此，在执行“player”时，它没有“monthMarker”，并且我没有得到结果。

请求您帮助以数组形式获取数据并将其提供给玩家 -> 标记。

谢谢

Answer 1

请记住，这是一个异步调用，因此您的代码应该位于 Promise 内。

例如:

function getJson() {
    fetch("https://api.myjson.com/bins/y2v0k")
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            let minuteMarkers = [];

            data.event.forEach(function (item) {
                minuteMarkers.push(item.EventTimeMin);
            });

            createPlayer(minuteMarkers);
        })
        .catch(function (err) {
            console.log(err);
        });
}

function createPlayer(minuteMarkers) {
    let player = new MediaElementPlayer("player2", {
        features: [
            "playpause",
            "current",
            "progress",
            "duration",
            "markers",
            "fullscreen"
        ],
        markers: minuteMarkers,
        markerColor: "#00FF00",
        markerCallback: function (media, time) {
            alert(time);
        }
    });
}

getJson();