Converting Straight JS To JQuery

October 08, 2022 Post a Comment

Im trying to append some JSON data from the last.fm API, I have been using alert() at several stages to verify the API is being parsed correctly and it is, This has led me to the c

Solution 1:

Instead of

document.body.appendChild( ... );

have your function locate the <div> where you want the content added, like this:

var targetDiv = document.getElementById('lfmRecentTracks');

(Do make sure that there's only one element on the page with that "id" value!! Also, for the sake of IE, make sure that name isn't a "name" attribute on anything either.)

Then you should be able to do this:

targetDiv.appendChild( whatever );

Solution 2:

document.getElementById() and appendChild() in general work fine in all major browsers, apart from a (likely irrelevant) issue with IE using id and name interchangeably. jQuery isn't necessary here.

Solution 3:

There's no reason to do this. jQuery is JavaScript, but with added functionality. If it doesn't work in JavaScript, the translated jQuery wont work either. That's not even mentioning the added (unnecessary) work to translate it.

Solution 4:

I wont argue whether you need jQuery or not. It's not a necessity. However, if you do want to use it, this is how you'd do the same code with jQuery:

Baca Juga

            function calculateDateAgo(secAgo) {
             var agoString, agoRange, agoScaled;
             if(secAgo >= (agoRange = 60*60*24)) 
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
             else if(secAgo >= (agoRange = 60*60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
             else if(secAgo >= (agoRange = 60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
             else if(secAgo >= -60)
               agoString = "blastin' out now";
             else
               agoString = "soon ;)";
             return agoString;
            }

            function truncateName(name, l) {
            return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
            }

            function lfmRecentTracks(JSONdata) {
                try { 
                    var eImg, eLink, eSpan, divTag, eWrapper, date;
                    var oTracks = new Array().concat(JSONdata.recenttracks.track);
                    for (var i = 0; i < oTracks.length; i++) {
                        //insert coverart image
                        var spanTag  = $('<span class="lfmTrackImageCell tab_item"></span>');
                        $("body").append(spanTag);
                        if(oTracks[i].image[1]["#text"] != "") {
                            eImg = $('<img src="'+oTracks[i].image[1]["#text"]+'" class="lfmTrackImage" />');
                            spanTag.appendChild(eImg);
                        }else{
                            eImg = $('<img src="http://cdn.last.fm/flatness/icons/res/3/track.png" class="lfmTrackImageNotFound" />');
                            spanTag.appendChild(eImg);
                        }
                     }
                    for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
                      //insert track link
                        spanTag = $('<span class="lfmTrackInfoCell tabslider"><a href='+oTracks[i].url+' target="new" class="lfmTrackTitle">'+truncateName(oTracks[i].name, 25)+'</a></span>');
                        //alert(truncateName(oTracks[i].name, 25));
                        //alert(oTracks[i].url);
                        $("body").append(spanTag);

                        //insert artist name
                        eSpan = $('<span class="lfmTrackArtist">'+truncateName(oTracks[i].artist["#text"], 22)+'</span>');
                        //alert(truncateName(oTracks[i].artist["#text"], 22));
                        $("body").append(eSpan);

                        //insert date
                        date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts));
                        eSpan = $('<span class="lfmTrackDate">'+ date +'</span>');
                        spanTag.append(eSpan);
                        //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
                        $("body").append(eSpan);
                     }
                } catch(e) {}
            }

Now, I offer no warranty to whether this works or not in production, but it looks right. Also, I wasn't sure what you were doing with the i <>[lessthanhere] oTracks.length; section, so I left it in. Normally, it'd be i < oTracks.length;.

Solution 5:

It should be pretty simple. If there is one thing jQuery is good at (and there are many), it is DOM manipulation (ie exactly what you're trying to do.) Start with these tutorials

http://docs.jquery.com/Tutorials:How_jQuery_Works

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

The second one will give you a good introduction to inserting HTML into a document. After that just check out the manipulation section of the documentation.

JavaScript Passion