Support » Fixing WordPress » Retrieve JSON data and display in table

  • Hi,

    New to WordPress and long time since writing code, but I have a new website idea and wanted to get some views on how best to go about this idea.

    I would like for a visitor to enter a value (membership number) and click a submit button.

    On submit I want to call a external API with the membership number as a filter and then display the results back into a table.

    Now is this something I would just need to write code for into a particular page?

    If anyone has any atarting point of what I would need on a page to make this happen that would be great.

    Thanks
    Troy

Viewing 12 replies - 16 through 27 (of 27 total)
  • That was fast 😉

    No worries, you’re most welcome!!

    Samuel,

    Thank you it has been working which is fantastic and I can’t thank you enough.

    Here it is in action.

    http://www.startershut.com.au

    I might be pushing my luck but was wondering how I would go about replacing the ‘anchoredHandicap’ in the first table with the first ‘handicap’ from the second table.

    Actually I think I may have figured it out.

    I changed:

    $html .= ‘<td>’.$json_data[‘handicap-history’].'</td>’;

    to:

    $html .= ‘<td>’.$json_data[‘handicap-history’][0][handicap].'</td>’;

    This seems to work

    Oops, one more thing on this.

    The date still seems off returnig a value “24-05-54”, when it is expected to be 27/06/2015

    Now I am assuming it is something to do with GMT? Is there a simple way to convert this.

    Hi Starter’s Hut admin,

    You are very welcome. Thanks for the service you provide to people in your site.

    I might be pushing my luck but was wondering how I would go about replacing the ‘anchoredHandicap’ in the first table with the first ‘handicap’ from the second table.

    As you figured it out, use $json_data['handicap-history'][0]['handicap'] to do that, which will get the first value from the multiple children objects.

    The date still seems off returnig a value “24-05-54”, when it is expected to be 27/06/2015

    I don’t really know what issue you have right there, I mean your site outputs 47454-05-24 while my localhost says 1996-17-04.. I have even customized it to output date in this format 17/04/1996:

    function elh_get_api_data() {
    	// ref: https://wordpress.org/support/topic/retrieve-json-data-and-display-in-table
    	ob_start();
    
    	?>
    		<form action="" method="post">
    			<label for="user_id">Enter Golflink Number</label>
    			<br />
    			<input type="text" name="user_id" id="user_id" value="<?php if($_POST["user_id"] != '') echo $_POST["user_id"]; ?>" />
    			<input type="submit" name="submit_form" value="submit" />
    		</form>
    	<?php
    
    	if( $_POST["submit_form"] != '' && $_POST["user_id"] != '' ) {
    
    		$user_id = $_POST["user_id"];
    		$json = file_get_contents( 'http://www.golflink.com.au/mobileService/GolferService.svc/HandicapHistory?userId=' . $user_id . '&numberOfResults=20' );
    		$json_data = json_decode($json, true);
    
    		if($json_data['golflink_number'] != '') {
    
    			$html = '<table>';
    			$html .= '<tr><th>golflink_number</th> <th>category</th> <th>anchoredHandicap</th> </tr>';
    			$html .= '<tr>';
    			$html .= '<td>'.$json_data['golflink_number'].'</td>';
    			$html .= '<td>'.$json_data['category'].'</td>';
    			$html .= '<td>'.$json_data['anchoredHandicap'].'</td>';
    			$html .= '</tr>';
    			$html .= '</table>';
    
    			$html .= '<h2>Handicap History:</h2>';
    
    			$html .= '<table>';
    			$html .= '<tr>';
    			$html .= '<th>date</th> <th>club</th> <th>par</th> <th>rating</th> <th>gross</th> <th>net</th> <th>played_off</th> <th>played_to</th> <th>modified_date</th> <th>rounded_handicap</th> <th>handicap</th> <th>top_10</th> <th>score_status</th> <th>CompetitionId</th> <th>IsAnchored</th>';
    			$html .= '</tr>';
    
    			foreach ($json_data['handicap-history'] as $data) {
    
    				$html .= '<tr>';
    				$html .= '<td>'. date("d/m/Y", $data['date']) . '</td>';
    				$html .= '<td>'. $data['club'] . '</td>';
    				$html .= '<td>'. $data['par'] . '</td>';
    				$html .= '<td>'. $data['rating'] . '</td>';
    				$html .= '<td>'. $data['gross'] . '</td>';
    				$html .= '<td>'. $data['net'] . '</td>';
    				$html .= '<td>'. $data['played_off'] . '</td>';
    				$html .= '<td>'. $data['played_to'] . '</td>';
    				$html .= '<td>'. date("d/m/Y", $data['modified_date']) . '</td>';
    				$html .= '<td>'. $data['rounded_handicap'] . '</td>';
    				$html .= '<td>'. $data['handicap'] . '</td>';
    				$html .= '<td>'. $data['top_10'] . '</td>';
    				$html .= '<td>'. $data['score_status'] . '</td>';
    				$html .= '<td>'. $data['CompetitionId'] . '</td>';
    				$html .= '<td>'. $data['IsAnchored'] . '</td>';
    				$html .= '</tr>';
    
    			}
    
    		} else
    			$html = "Nothing found for this number. Please try again.";
    
    		$html .= '</table>';
    	} else
    		$html = "Please provide a Golflink number.";
    
    		echo $html;
    
    	return ob_get_clean();
    }
    // insert this shortcode [handicap-data] into a new post/page
    add_shortcode('handicap-data', 'elh_get_api_data');

    ( you should still do your customization )

    Appreciate the kinds words, the next stage is to really help small community golf clubs have a website they can use for events and timesheets….but that is for another discussion 🙂

    Thank you again for the clean up of the code.

    I am really not sure what to do with the date, because as you say it is differnt for you and me.

    Is it possible to be related to a timezone given the output format of the date data?

    Hello again.

    Thanks and you’re welcome.

    Can you test if this is going to return the right date for you? because I noticed the date integer has 13 numbers while I have always worked with a 10 one. See this:

    mb_substr(date("d/m/Y", date("d/m/Y", $data['date'])), 0, -3);

    OR

    mb_substr(date("d/m/Y", date("d/m/Y", $data['date'])), 0, 10);

    I trust the 2nd one.

    And it’s alright we should work on this.

    Thanks again.

    I tried both of the above but they both return 01/01/1970 in the website.

    -Troy

    Hi Troy.

    I am sorry, I was a little stupid lol. This should work:

    $html .= '<td>'. date("d/m/Y", mb_substr($data['date'], 0, 10)) . '</td>';
    And

    $html .= '<td>'. date("d/m/Y", mb_substr($data['modified_date'], 0, 10)) . '</td>';

    So I did a bit more research on this epoch time.

    It was the milliseconds being an issue.

    date(‘y-m-d’, $data[‘date’]/1000)

    The above worked.

    Thanks

    Okay! glad to hear you are fixed with dividing by 1000 ( which is same as dropping last 3 digits from date integers which are zeros ).

    Great! have a nice day Troy!

    Hi Samuel, Andrew, and Troy! (or any other clever folks out there)

    I’m hoping to do a very similar trick as Troy, but haven’t been able to successfully modify the code in this thread myself and was hoping for a few pointers (I’m comfortable with code, but very new to JS and PHP).

    I’d like to add the data from this feed:
    http://ebird.org/ws1.1/data/obs/geo/recent?lng=-112.53&lat=53.38&dist=10&back=30&maxResults=500&locale=en_US&fmt=json (documented here: https://confluence.cornell.edu/display/CLOISAPI/eBird-1.1-RecentNearbyObservations )

    into a table with “Common Name” “How Many” “Date” and “Location Name” columns. I’d also love to be able to “fancy the table up” with jquery dataTables, so that people could sort/search/paginate.

    I have two stretch goals as well:
    1. to have the location name link to a google map of the lat/lng supplied in the json feed e.g. something like:
    <td><a href="http://maps.google.ca/maps?f=d&daddr=' $data['lat'] ',' $data['lng'] '&z=8" target="_blank">'$data['locName']'</a><td>'

    and 2. it would be really awesome to have people be able to select distance and date values from drop-down lists to load different results from the json feed (e.g. &dist=10/25/50 and &back=7/14/30).

    The page I’m working on is currently at http://djmdesign.ca/bbo/updates/sightings/ but will get moved over to http://beaverhillbirds.com/updates/sightings/. I’ve been trying, unsuccesfully, to get plugins to do this for me (I currently have a static table showing a rough idea of the desired result), and also have some scratchwork at http://beaverhillbirds.com/jsonfeed.html and jsonfeed2.html.

    Any, and all, pointers/suggestion/wisdom/code would be very much appreciated!

    —Jonathan

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘Retrieve JSON data and display in table’ is closed to new replies.