Retrieving user's listening statistics from Last.fm API with JSON formatting

My goal is to showcase the Last.fm user playcount on my website (refer to 'playcount' on ). I attempted the code below, but I'm unsure if I am heading in the right direction.

$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=XXX&api_key=XXX&limit=5&format=json&callback=?", function(data) {
    var html = '';
    $.each(data.user.playcount, function(i, item) {
        html += "<p>" + item.playcount + "</p>";
    });
    $('#count').append(html);
});
});

Answer №1

There is no need for the inner foreach loop in this case, as user.getInfo only returns information for one user. You can simplify the code like this:

$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getInfo&user=XXX&api_key=XXX&format=json", function(data) {
    var html = "<p>" + data.user.playcount + "</p>";
    $('#count').append(html);
});
});

To streamline the URL, I have removed the limit and callback parameters.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Moving the input box down to the lower portion of the screen

My goal is to create an interactive input box that glides smoothly to the bottom of the screen when clicked by the user. However, the current implementation causes the input box to move too far down, requiring the user to scroll down in order to see it. H ...

Error encountered while implementing onMutate function in React Query for Optimistic Updates

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: ...

I'm sorry, there seems to be a JSON error. The syntax is incorrect and it

I am facing a problem where I encounter an error when trying to post a JSON object. The error message reads: SyntaxError: JSON.parse: unexpected character Here is my JavaScript object: var $arr_data = { title: '', category: &apo ...

Create a unique Bootstrap 5 carousel featuring a single progress bar

Hey guys, I'm having some trouble with my Bootstrap 5 carousel. I want to add a progress bar with left and right arrows, and also the number of slides displayed, just like in this image: https://i.sstatic.net/pqOMy.jpg I did some research and found ...

Error in Typescript occurrence when combining multiple optional types

This code snippet illustrates a common error: interface Block { id: string; } interface TitleBlock extends Block { data: { text: "hi", icon: "hi-icon" } } interface SubtitleBlock extends Block { data: { text: &qu ...

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

capturing webpage content with javascript for use in a screenshot

Is there a way to capture a screenshot of a webpage using JavaScript and utilize the canvas tag for this purpose? I attempted to use the html2canvas plugin in the past, but found it lacking in power. I would like to achieve this without relying on extern ...

Passing values from Vue3 child component to parent component

Hey there, I'm currently diving into the world of Vue and I'm working on a table that dynamically displays abbreviations. I've been trying to send a searchTerm from my child component to the parent component, but I'm struggling with ge ...

The Jersey proxy client is unable to properly deserialize the JSON response into the classes generated by RAML

I have used the raml-to-jaxrs maven plugin (version 2.1.1-SNAPSHOT) to generate classes from this RAML file and I call the service using a Jersey proxy client as shown below: Client client = ClientBuilder.newClient(); Logger logger = Logger.getLogger(getC ...

sending an array variable to ajax in CakePHP

I am currently working on creating a feature similar to this where users can select multiple conditions for their search. My approach involves populating an array with the selected conditions and passing it through ajax to make a request. Below are snippet ...

Angular with Leaflet and Leaflet AwesomeMarkers error: "Attempting to access 'icon' property of undefined"

I'm attempting to integrate Leaflet Awesome Markers into my Angular 10 project to incorporate Font Awesome icons in my Leaflet markers. However, I'm running into an error when trying to create a L.AwesomeMarker. https://i.sstatic.net/7o81y.png ...

Is it advisable to utilize the $.getJSON() function for loading a JSON-LD file?

I have a website that pulls all its data from a JSON file. I've decided to convert the file to JSON-LD in order to enhance the semantic value and enable search engines to crawl the content more effectively. Currently, I am using the following code to ...

What method does the framework use to determine the specific API being accessed?

How can the framework determine which API is being accessed? app.get('/user/:userId/name/export', function (req, res) { var userId = req.params.userId; } app.get('/user/:userId/name/:name', function (req, res) { var userId = req ...

What is the proper way to delete a callback from a promise object created by $q.defer() in AngularJS?

When working with AngularJS, the $q.defer() promise object has the ability to receive multiple notify callbacks without overwriting previous ones. var def = $q.defer(); def.promise.then(null, null, callback1); def.promise.then(null, null, callback2); If ...

Avoid refreshing the page upon pressing the back button in AngularJS

Currently, I am working on building a web application that heavily relies on AJAX with AngularJS. One issue I am facing is that when the user clicks the back button on their browser, the requests are being re-made which results in data having to be reloa ...

What is the best way to enable my search function to filter out specific items from a table?

Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...

Update the src attribute in an HTML document

I am looking to dynamically change the size of an image on an HTML page using a dropdown list. Here is my code: <html> <head> </head> <body> <select id="selectbox" name=""> <opti ...

Transform the date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy with the help of JavaScript

I am looking to convert date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy when the dates are retrieved from a JSON object. Currently, I am utilizing the ng-csv plugin to download this JSON data, which is working properly. How ...

"Troubleshooting: Why is the 'RectAreaLightHelper' not moving correctly in React-three-fiber

Issue Overview: I have noticed that the rectAreaLight behaves differently compared to other light helpers in my project. Despite using the "useHelper" function and placing it in the "three/examples" folder, the position of the rectAreaLight does not change ...

What is the best way to rearrange multiple items in an array?

I have a list of students organized by room, with students grouped within each room. I am looking to rearrange the order of student groups within a room by clicking "up" or "down". I have made an attempt below, but it seems messy and does not work properl ...