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 15 replies - 1 through 15 (of 27 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The solution will likely be the same outside of WordPress as inside, with the exception of a line of code.

    Have you worked with JavaScript before?

    Thanks.

    I have worked with JavaScript before, but not wordpress so my problem is figuring out shortcodes and also where to place the code within wordpress.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh so you’re using a plugin for this?

    No sorry no plugin, but have been reading that may be an option to write a plugin and create shortcodes within that to call from somewhere in a page?

    Sorry may have made a mistake referring to shortcode.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you create a form on a page?
    Do you know which API you can use and how to use it?

    Yes I can create a form on a page, I have got a basic input box and submit button to display in a page.

    I have installed the Divi theme and with that they seem to have a code module which I have used to display the input field and submit button.

    I am just trying to figure out how how best to call the API with the value from the input field and then display those results ideally in a table on the same page.

    BTW really appreciating the help.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What is the API? I assume it’s public

    Yes public golf handicap one in Oz.

    Here is the link
    http://www.golflink.com.au/mobileService/GolferService.svc/HandicapHistory?userId=5013200180&numberOfResults=20

    I want the input field to replace the userID

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Okay clearly the API isn’t as simple as it should be, but your code will be something like; https://jsfiddle.net/8xwwmwqy/

    Thanks so much Andrew really appreciate it.

    Just for my info what do you mean by it isn’t as simple as it should be?

    So I was able to add the form code to the Divi module and I get the input field and button.

    Should I be putting the javascript in the functions.php?

    Probably a 101 question, but assuming this has returned data how best do I output this in wordpress?

    @startershut, from the API link you provided above, which data are you trying to output upon user entering their userId ? and why 20 results?

    I just have a method of doing this through PHP and I thought it would be helpful for you. And @andrew gave you a startup/example you should work on to make API calls with JavaScript which is awesome!

    Thanks Samuel,

    20 results seems to be the standard that people view as it what their handicap is based on.

    In terms of results looking to return the club, played to, handicap, date fields for the 20 results.

    Thanks, I was not sure if javascript or PHP would work better given I am working within a theme, just struggling to find where to put the code and maybe PHP is easier? Not sure.

    Hi Startershut!

    As promised, here’s something to do.

    Add this code to your functions.php file:

    function elh_get_api_data() {
    
    	ob_start();
    
    	?>
    		<form action="" method="post">
    			<label for="user_id">Hello there! What is your user ID?</label>
    			<br />
    			<input type="text" name="user_id" id="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);
    
    		$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("Y-m-d", $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("Y-m-d", $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>';
    
    		}
    
    		$html .= '</table>';
    	}
    
    		echo $html;
    
    	return ob_get_clean();
    }
    
    add_shortcode('handicap-data', 'elh_get_api_data');

    Paste bin: http://pastebin.com/ZLuJuejr

    How to use?

    Insert [handicap-data] (shortcode) into a new post or page, and do test it with this ID: 5013200180 which you provided.

    If that’s what you want, don’t forget to make improvements if needed.

    Let us ( me & Andrew ) know how it goes 🙂

    Wow thanks Samuel, I will give it a go later tonight and see how it goes.

    Thank you and Andrew in advance for your help!

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