CODEWITHSUNDEEP
jqueryjson
Brian
Brian

Reputation: 287

How to get a unique handle on JSON data

I am using JSON to get data from a database, but I would like some of the data to have a unique identifier or handle. For example, I have a row of sample messages, I would like to append a "Reply" button to each message. But of course, if I just included in the loop, each message contains the same button, with the same functionality. For the sake of demonstration I replaced the button with the number "1", there are three messages in the database, Ideally I would like each them to appear with different numbers: 1, 2, 3, etc.

CODE:

// jSON call for messages page


$(document).ready(function()
        {
                $.getJSON("http://localhost:8888/php_this/json-data-messages.php", function(data)
            {
        $.each(data.messages, function(index, message)
                {
        $("#msgContent").append("<p><b> From: </b>" + message.fromLecturerNumber + "</p>");
                    $("#msgContent").append("<p><b> Date: </b>" + message.messageDate + "</p>");
                    $("#msgContent").append("<p><b>Subject: </b>" + message.messageTitle + "</p>");
                    $("#msgContent").append("<p>" + message.messageBody + "</p>");
                    $("#msgContent").append("<p>1</p>");
        });
                });
            });

Upvotes: 0

Views: 34

Answers (2)

Brian
Brian

Reputation: 287

Folks, thank you for your help. Missing the index value was an amateur mistake, however it turns out there was an even simpler way of doing what I wanted to. I ended up turning individual bits of jSON data into unique ids and using them to build links to other pages/functions. Check it out:

$(document).ready(function()
            {
                $.getJSON("http://localhost:8888/php_this/json-data-students.php", function(data) 
                {
                    $.each(data.students, function(index, student) 
                    {
                        $("#studentsData").append("<li><a href='#" + student.firstName + "'>" + student.lastName + ", " + student.firstName + "</a></li>");
                        $("#theBody").append("<div data-role='page' id=" + student.firstName + ">\n\
                        <div data-role='header' data-add-back-btn='true'><h1>Course Details</h1></div>\n\
                        <div role='main' class='ui-content' id='content'><ul data-role='listview' id='list2'>\n\
                        <li>Student ID: " + student.studentID + "</li>\n\
                        <li>Module No1: " + student.moduleNo1 + "</li>\n\
                        <li>Module No2: " + student.moduleNo2 + "</li>\n\
                        <li>Course ID: "+ student.courseID + "</li>\n\
                        </ul></div><div data-role='footer' data-position='fixed'>\n\
                        <a href='www.dit.ie' target='_blank'>DIT</h4></div></div>");
                    });
                    $("#studentsData").listview("refresh");
                });
            });

Upvotes: 0

Pango
Pango

Reputation: 673

You can use the index variable from the loop to create a unique number for each of the buttons. The index will start at 0, but you could add 1 to that to get 1,2,3, etc.

$(document).ready(function() {
    $.getJSON("http://localhost:8888/php_this/json-data-messages.php", function(data) {
        $.each(data.messages, function(index, message) {

            [...your other code here...]

            $("#msgContent").append("<p>" + (index + 1) + "</p>");
        });
    });
});

Upvotes: 1

Related Questions