Unable to load JSON file data as an array for one of the parameter in mediaElement.js

Question

I am using MediaElement.js library to add marker to audio timeline. I am trying to fetch data from JSON file, converting it into an array and (unsuccessfully) using it as one of the parameter.

My JSON data is as follows:

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

It can also be accessed from: https://api.myjson.com/bins/y2v0k

My code to fetch the data:

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);
    }
});

When I did console.log(minuteMarkers), I got [] as result. I was expecting to get ["4", "10"].

One of the problem that I could think is: The fetch is giving me data after "player" variable runs. Hence while executing "player" it does not have "minuteMarker" and I am not getting the result.

Requesting your help to get the data as an array and feed to the player-> marker.

Thanks

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — , Jan 15 '19 at 19:07
@user615274 i am getting an error as below: SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () However, this is not the issue I think.. — Sushant, Jan 15 '19 at 19:40
`JSON.parse()` does not manage to parse, or the json is badly formed or does not need to be parsed. Can you confirm that data is an object and that it contains the event property. It is necessary this good so you can then fill minuteMarkers — Mario, Jan 15 '19 at 19:50
Yes, it does not need to be parsed. I have removed from my code as well. And yes it contains the event property. You can check the json data at the link: https://api.myjson.com/bins/y2v0k — Sushant, Jan 15 '19 at 19:58

score 1 · Accepted Answer · answered Jan 15 '19 at 19:15

1

Remember that is an asynchronous call, so your code should be inside the promise.

For example:

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();

answered Jan 15 '19 at 19:15

roag92

146
1
6

Thank you for the code. Yes, I am aware of async call and I tried doing the same thing but the issue is: The player variable is used by another file as one of the parameter of function. For example function buildmarkers(player, controls, layers, media) { if (!player.options.markers.length) { return; } ..... so If I add the "createPlayer" as one of the async call, the library may not be able to access the "player" variable !. – Sushant Jan 15 '19 at 19:29
I think that is a problem in your implementation dealing with the asynchronous calls. If you want to provide me the full code. – roag92 Jan 15 '19 at 20:04
Please find the link for the github Repo: https://github.com/Sushant-ABdigital/Media-Player-With-Marker – Sushant Jan 15 '19 at 20:56
I think that is not an issue, if you want to manipulate the instance of MediaElementPlayer which will be player, you can declare player outside as global and modify the createPlayer. The selfmarker library is an extension to create a player with custom markers. – roag92 Jan 15 '19 at 22:21
Thanks for the input. I dropped the 'fetch' function and did it with 'XMLHttpRequest' so that I can return the value. – Sushant Jan 17 '19 at 17:24

Unable to load JSON file data as an array for one of the parameter in mediaElement.js

1 Answers1