Extraction of JSON data using PebbleJS

Having trouble extracting JSON data in Pebble.

var UI = require('ui');
var ajax = require('ajax');

var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=?";
var card = new UI.Card({
  title:'last.fm stat',
  subtitle:'Fetching...'
});
card.show();

ajax({ url: URL }, function(data){
  var topArtist=data.topartists[0].artist.name;
  card.subtitle(topArtist);
});

Encountering the following error:

[INFO] ocess_manager.c:368: Heap Usage for App <lastfm sta: Total Size <48584B> Used <6256B> Still allocated <28B>
[PHONE] pebble-app.js:?: (+) [card 1] : [card 1]

[PHONE] pebble-app.js:?: JavaScript Error:
TypeError: Cannot read property '0' of undefined
    at pebble-js-app.js:123:32
    at pebble-js-app.js:871:17
    at req.onreadystatechange (lib/ajax.js:11

4:9)

javascriptajaxjsonpebble-watchpebble-js

Answer №1

Good evening Mona,

  1. Make sure to delete the question mark at the end of the URL.

  2. Reposition the card.show() command by moving it after adding a subtitle.

  3. Clearly state that you are working with JSON data.

After applying these changes, your final code will appear as follows:

var UI = require('ui');
var ajax = require('ajax');

var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=";
var card = new UI.Card({
    title:'last.fm stat',
    subtitle:'Fetching...'
});

ajax({ url: URL, type: 'json' }, function(data) {
    var topArtist = data.topartists.artist[0].name;
    card.subtitle(topArtist);
    card.show();
});

This modification should work flawlessly. :)

Additionally, remember to include a failure callback in your ajax method:

ajax({object}, success, failure)

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

What is the best way to combine two objects in Angular?

How can I merge objects in Angular 2? Object Response 1 0:Object 1:Object 2:Object 3:Object Object Response 2 0:Object 1:Object 2:Object 3:Object MyComponent Component resultdata :any=Array; fooddrinks_data_func(Defaultparams){ return this.Ci ...

jsonangularobject

exploring the contrast of css versus javascript selectors

Could you please explain the contrast between div#name and #name? Is there a significant difference when using class or id to position an element? Thank you for your help. ...

javascriptcss

Tips for organizing multiple TextField components within a Grid container using Material-UI

I utilize Material-UI for my front-end design needs. I have a query related to the Grid layout feature. My goal is to include 7 TextField elements, but they are appearing overlapped. When I modify all 7 TextField elements from xs={1} to xs={2}, they become ...

javascriptreactjsmaterial-ui

Angular is reporting that the check-in component is nonexistent

I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, th ...

javascriptangulartypescript

"The FindByIdAndUpdate function is successfully updating the data, but it is unexpectedly

This is my first time seeking guidance here, as I've reached a dead end with my issue. I am currently working on a household collection that includes a member collection within it. Whenever new members join, I need to update the household collection ...

javascriptnode.jsexpressroutes

Tips for organizing data and dynamically linking options to another select value?

One of my challenges involves working with two select elements. The first select allows for multiple options, while the second select is dependent on the choice made in the first one. <select class="form-control" id="select1"> <option value=""& ...

javascriptjquerydictionary

Tips for sending multiple variables in a loop as JSON data through an AJAX request

I need assistance with the code below. I am trying to pass the value[i] into a data string in a json ajax post submit. Essentially, my goal is to gather all the checked values in a form and insert them into an existing json data string using ajax. This is ...

javascriptjqueryajaxjson

filtering elements with selectable functionality in jQuery UI

I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>. The structure of the HTML is as follows: <ul id="selectable"> <li> <div id="1"></div> ...

javascriptjqueryhtmlcssjquery-ui

Receiving Nothing But Null Values from MongoDB

Why is my code returning null? async function run() { try { await client.connect(); const productsCollection = client.db("inventory").collection("items"); // Retrieve All Products app.get('/products', asyn ...

javascriptreactjsmongodbexpress

Fixed position is used on elements that should always remain in the exact

I have a fixed menu on my website that is working perfectly fine. I also have a container (not using Bootstrap) that should stay fixed when it reaches the static menu. Everything is functioning as expected, except when I resize the window, the container se ...

javascriptjqueryhtmlcsscss-position

Does JSON have a special reserved key for identifying the time?

I've noticed an interesting issue when logging the json string of a key labeled tid - it always shows up as 0. Take a look at this example: var transaction = {tid:1, type:0, time:126312736}; var transStr = JSON.stringify(transaction); console.log(tra ...

javascriptjsonnode.jskey

Conceal particular table cells through jQuery

I am a beginner in the world of jQuery. My goal is to hide certain cells in a row when clicked, and have them displayed again when clicked once more. I've searched high and low for a solution, but all I find is how to hide entire rows. Here's an ...

javascriptjqueryhtml

Conceal a class if the inline-block !important display property is applied to another class

I am trying to hide a class based on the display property of another class being set to inline-block !important, using only JavaScript. Here is my current code snippet: window.onload = function() { hidedeliveryFunction() { var outOfstock = d ...

javascripthtmlcss

Automatically update a time field in real-time when a checkbox is selected in Rails, and dynamically synchronize the changes with the database without the need for a

I have a task that requires updating the Time of Arrival box dynamically when a checkbox is checked. This should be done without needing to submit a form, using AJAX. The current code I am working with is as follows: <table border="1"> <tr&g ...

ruby-on-railsrubyajaxruby-on-rails-3forms

The NG-CHANGE event will not be triggered when using an alertify popup window instance

Trying to create a settings modal window using alertify.js to change the background image of a page. However, when the modal is created, the ng-change functionality of the dropdown select is lost. It only works if the dropdown is on the main page. Select ...

javascriptjqueryhtmlangularjs

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

javascripthtmlcssangularjs

Showing PDF files in Angular: SecureValue error - [property]=binding must be used

Recently, I encountered an error or warning stating 'SafeValue must use [property]=binding' while attempting to display a PDF. Despite using binding in my code, I am unsure of why this is happening. Below is the snippet of my code: getSafeUrl() ...

javascriptangular

Unlimited Scrolling in Angular 2: A Complete Guide

For my current project, I am utilizing angular2-infinite-scroll. My concept is to load 6 items on the initial page load and then add an additional 6 items each time the user scrolls to the bottom of the page. However, I have encountered an issue where the ...

javascriptangularinfinite-scroll

Sending JSON data to an Express app is yielding unexpected results

Despite my efforts in setting up the nodejs server to receive posted json data, it seems that the server is not recognizing the data I am sending. The node.js code snippet is shown below: var express = require('express') var bodyParser = req ...

jqueryjsonnode.jsexpress

How can I simultaneously execute two functions, one while the page is reloading/refreshing and the other on ng-click?

Here is the code snippet for the controller functions related to payment status. $scope.userhold_payment = function() { $http.get('http://localhost/ngaffiliate/api/payment/change_hold_payment_status') .then(function(response) { ...

javascriptangularjs