2 Replies Latest reply on Apr 27, 2016 11:32 AM by kerrishotts

    pull json data depending on item tapped?

    davidl31718243

      so i have a phonegap app which pulls JSON data from my server, the data it is pulling is a list of "events".

      each event in the "all events" page has its image, title, date & username of user who posted it,

       

      What I want to do is when you click an item for it to go to another page a detailed single event page which pulls all the JSON data for that,

       

      I can do the JSON pulls thats fine all it is is a how do I define the event that the user has chosen to look at

       

      my API url looks for the single events ID "api=singleevent&id=1"

       

      i want the number 1 to be relaced with the id of the event choen on the previous "all events page"

       

      Any ideas?

       

      Thanks in advance!

        • 1. Re: pull json data depending on item tapped?
          Chris W. Griffith Adobe Community Professional

          The answer really lies with how you are writing your app. Each framework will solve this differently. If you used Ionic 2, it could be (click)="doEvent(eventID)", while jQuery Mobile might be $('a').click (doEvent).

           

          There is nothing special that PhoneGap does that would make this code any different from running it in a traditional browser.

           

          I would suggest that you might want to pre-fetch all the event data at once at the start of the app. This will make the overall mobile experience faster.

           

          Chris

          1 person found this helpful
          • 2. Re: pull json data depending on item tapped?
            kerrishotts Adobe Community Professional

            A framework-agnostic way of doing this would be something like this (ES2015, demo on jsbin):

             

            let events = [
              {name: "Christmas Party", id: 1000},
              {name: "New Years Party", id: 1001},
              {name: "Valentine's Day", id: 1002}
            ];
            
            let theList = document.getElementById("eventList");
            
            // Render the given events to the specified element. We assume
            // the element is an unordered list, since we'll be appending
            // list items.
            function renderList(events, ul) {
                // here we use document fragments to avoid thrashing the
                // DOM with lots of appendChild()s. Instead we only have
                // to append the document fragment once.
                let df = document.createDocumentFragment();
            
                // create a list item for each event
                for (let event of events) {
                    let li = document.createElement("li");
            
                    // use textContent instead of innerHTML here because
                    // it's safer when dealing with potentially untrusted
                    // data. Note that textContent doesn't parse HTML.
                    li.textContent = event.name;
            
                    // we'll store the event's ID in a data attribute for
                    // later use
                    li.setAttribute("data-event-id", event.id);
                    df.appendChild(li);
                }
            
                // clear the list before we add anything else to it
                ul.innerHTML = "";
            
                // the document fragment has all our list items within
                // appending them to the unordered list will add them all
                // at once without thrashing the DOM needlessly.
                ul.appendChild(df);
            }
            
            // called when a user clicks a list item
            function ontap(evt) {
                // evt.target will let us know which element was clicked
                let theTappedEl = evt.target;
              
                // make sure it's an element we care about! In this case
                // we only want list items
                if (theTappedEl.matches("li")) {
                  
                  // extract the event ID from the attribute we set
                  // earlier
                  let eventId = theTappedEl.getAttribute("data-event-id");
                  
                  // if we can extract one, then we can do further processing
                  // which in this case is just an alert()
                  if (eventId !== null) {
                    alert (`You tapped ${theTappedEl.textContent} with id ${eventId}`);
                    // you'd want to load data from your API using the retrieved
                    // eventId.
                  }
                }
            }
            
            // listen for any clicks on the list element -- this will include
            // clicks on all the children LIs. No need to create many different
            // handlers for each list item.
            theList.addEventListener("click", ontap, false);
            
            // Render the event list to our desired list element
            // Note that this doesn't affect our handler in any way, which means
            // we only have to attach the handler once and we're done.
            renderList(events, theList);
            
            

             

            Notes: I'm using "click" here, because I was on a desktop. If on mobile, you'd need to add a fast click library for clicks to be fast, or use a gesture library that generates "tap" events (in which case, you'd use "tap" instead of "click").

             

            Hope that helps!