How to effectively utilize JSON responses with jQuery Mobile?

I've been facing an issue with working on my JSON result in JavaScript. Can anyone provide some insight?

Even though the JSON call returns a success status code (200) and I can view the data in Firebug, no alert is being displayed.


$(document).on('pageinit', function(event){

   ...

   $('.link').on('click', function (event) {

          var parm = $(this).attr("data-parm");
          var url = 'http://****:8000/service?parameter=' + parm;

          $.getJSON(url, function (data) {
             var result = $.parseJSON(data);
             alert(result[1].emnam);
             parse(result);
          });
   });

});

function parse( result ) {
      alert( 'parse function' );
}

In the browser (using Firebug or Chrome Dev Tools), this is how my JSON result appears:

{success: "true", 
msg: "Data retrieved", 
data: [
{pernr: "00001032", emnam: "Michaela"}, 
{pernr: "00001016", emnam: "Mike"},
{pernr: "00001024", emnam: "Frank"}
]}

Ultimately, I am aiming to dynamically append the listview into the div #list, displaying pernr and name as columns. Any suggestions would be appreciated!

Answer №1

Here's an example of how you can achieve this: http://jsfiddle.net/exampleuser/abcd123/

let newTable = $("<table><thead><tr><th>ID</th><th>Name</th></tr></thead><tbody></tbody></table");
$(".someclass").append(newTable);
$.each(data.items, function (index, element) {
    newTable.find("tbody").append("<tr><td>" + element.id + "</td><td>" + element.name + "</td></tr>");
});

Answer №2

I found this snippet on the jqm-docs website

<ul id="input_what" style="height:40px;width:100%;" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="xyz" data-filter-theme="d"></ul>

-

$( "#input_what" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 2 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: 'http://****:8000/service?parameter=' + parm +'',
            dataType: "json",
            data: {
                term: $input.val()
            }
        })
        .then( function ( response ) {
            $.each( response, function ( i, val ) {
                html += "<li ><a class='completeItem' href='#'>" + val + "</a></li>";
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        }
        );
    }
});

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

Two components, one scroll bar, both moving within the same plane

For those interested, here is the JSFiddle link for further exploration: https://jsfiddle.net/q6q499ew/ Currently, there is a basic functionality in place where when you scroll past a certain point, an element becomes stuck until you start scrolling back ...

Coinciding titles within flot pie chart

I am facing an issue with overlapping labels in my pie charts generated using jquery flot, especially when the chart pieces are very small. Is there a recommended solution to prevent this overlap? Below is the configuration for my current pie chart: ser ...

Checking for an existing alert in JavaScript

In my development of a Blackberry Webworks (HTML5) app, I am running multiple methods simultaneously in the background. If any of these methods happen to fail, an alert is triggered using the alert() method in JavaScript. However, if both methods fail, two ...

In Javascript, objects within local scope cannot be accessed from nested functions

I'm currently working on a function that is meant to retrieve an object from a PHP file located on a different page. I've implemented the jQuery ajax function to handle the JSON retrieval, and it seems to be functioning as intended. However, I&ap ...

What is the most effective way to retrieve both grouped data and all data from mongodb?

I have successfully retrieved totalAccount and totalBalance using the code snippet above. However, I am facing an issue where no other field or data besides those two are showing up. How can I modify this code to also fetch all the data from my collectio ...

Transferring files with Node.js via UDP connections

I'm currently working on setting up a basic Node.js server that is designed to receive files from clients through UDP. The challenge I'm facing is that whenever I attempt to send a large file (anything over 100kb), the server appears unresponsive ...

PHP WebService, exclusively containing private variables within an empty array

I'm attempting to create a PHP webservice. In the "Aluno" class, there are 2 private variables. After struggling all day with this, I finally discovered that if I change those variables to public, everything works as expected. However, if they remain ...

Error: Unable to locate specified column in Angular Material table

I don't understand why I am encountering this error in my code: ERROR Error: Could not find column with id "continent". I thought I had added the display column part correctly, so I'm unsure why this error is happening. <div class="exa ...

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Nodejs App cannot be started locally due to a directory import issue

My journey to deploy my app on Heroku has hit a roadblock. The import statements, like import cors from 'cors', are causing the app to fail in production with the "Cannot Load ES6 Modules in Common JS" error. Interestingly, everything runs smooth ...

Invoking a synchronous JavaScript request to an MVC 4 Controller function

For the code I'm working on, I need certain functions to be executed sequentially. I attempted to use ajax calls but ran into issues due to their asynchronous nature. function GetLibraryActivities(libraryName, callback) { $.ajax({ dataTyp ...

Rendering JSX code using JSON data in a Reactjs application

I am working with a JSON file that contains JSX code as shown below: var data = {"content":"<ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className=&a ...

Listener for clicking on a marker in Google Maps

Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seem ...

Tracking tool for monitoring progress of HTTP POST requests

Hi, I am still a beginner when it comes to NodeJS and its modules. I could really use some assistance with creating a progress bar for an application I'm working on. Right now, the progress bar only reaches 100% upon completion and I suspect my piping ...

What are some ways to reinvigorate your determination?

With the use of ui-router, a state is created with a resolve function: .state('tab.social', { url: '/social/', views: { 'menuContent': { templateUrl: 'templates/social/tab-social.html', ...

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...

NextJs not processing Bootstrap form submissions

I’m struggling to figure out why my form isn’t submitting when I click the submit button. The backend seems fine because Postman successfully sends the information to the database. However, nothing happens when I try to submit the form. My tech stack ...

Issue: The data type 'void' cannot be assigned to the data type 'ReactNode'

I am encountering an issue while calling the function, this is just for practice so I have kept everything inside App.tsx. The structure of my class is as follows: enum Actor { None = '', } const initializeCard = () => { //some logic here ...

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...