CODEWITHSUNDEEP
javascriptjqueryjsonsynchronous
Dorukcan Kişin
Dorukcan Kişin

Reputation: 1131

Parsing json synchronously from url in javascript

I'm trying to get title of a youtube video. So i'm using jQuery to parse json. But it works asynchronously, so the answer comes after the page loaded. The result is:

http://www.youtube.com/watch?v=Ym0hZG-zNOk (undefined)

How can i fix it?

Thanks.

http://jsfiddle.net/3vQht/

<html>

<head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var link = "http://www.youtube.com/watch?v=Ym0hZG-zNOk";

        var videoID = link.substring(link.indexOf("=") + 1, link.length);

        document.writeln("<a target='_blank' href='" + link + "'>" + link.bold() + "</a> (" + name(videoID) + ")<br>");

        function name(value) {
            var source = "http://gdata.youtube.com/feeds/api/videos/" + value + "?v=2&prettyprint=true&alt=jsonc&callback=?";
            var fin;

            $.getJSON(source, function(json) {
                fin = json.data.title;
                console.log(fin);
            });

            return fin;
        }
    </script>
</head>

<body>
</body>

</html>

Upvotes: 1

Views: 3971

Answers (4)

Demian Flavius
Demian Flavius

Reputation: 795

Hy,
here is the solution :)

<script type="text/javascript">
    function name(value) {
        var source = "http://gdata.youtube.com/feeds/api/videos/" + value + "?v=2&prettyprint=true&alt=jsonc";
        $.ajax({
            type: 'GET',
            url: source,
            contentType: "application/json",
            dataType: 'json',
            success: function (json) {
                alert("here is the title: "+json.data.title+" .Use it how you want!");
            },
            error: function (e) {
                alert("error");
            }
        });
    }

    $(document).ready(function() {
        var link = "http://www.youtube.com/watch?v=Ym0hZG-zNOk";
        var videoID = link.substring(link.indexOf("=") + 1, link.length);
        name(videoID);
    });
</script>

If you want to get your data sync just use this version:

 $.ajax({
            type: 'GET',
            url: source,
            async: false,
            contentType: "application/json",
            dataType: 'json',
            success: function (json) {
                alert("here is the title: "+json.data.title+" .Use it how you want!");
            },
            error: function (e) {
                alert("error");
            }
        });
    }

Upvotes: 3

technosaurus
technosaurus

Reputation: 7802

I haven't played with their api, but a quick look at

https://developers.google.com/youtube/2.0/developers_guide_json

indicates that they support jsonp callbacks so that you can prepend a script that does sends the data to a callback function (just add &callback=yourFunction to the end of the url)

function prependScriptFromUrl(s){
  var a=document.createElement("script");
  var b=document.getElementsByTagName('head')[0];
  a.src=s;
  b.insertBefore(a,b.firstChild)
}

Upvotes: 0

Frank Rupprecht
Frank Rupprecht

Reputation: 10408

If you prefere, you can also fetch your data synchronously. Check the jQuery.ajax() documentation for the async parameter.

EDIT: Just figured that you're loading your data using JSONP and that it's not possible to do that synchronously. You need to use asynchronous callbacks instead.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

getJSON is asynchronous, so when the return fin; is reached, the data hasn't been fetched yet.

Everything that depends on the JSON MUST be inside the success callback.

Upvotes: 1

Related Questions