Tutorial #85: Fetch data from WordPress posts using JSON API

Hello everyone!

I recently helped a friend of mine setup his own blog using WordPress. It feels great to see people slowly moving towards blogging. WordPress is one of the popular content management systems out there that make blogging a lot easier. It provides the ability to not only assign multiple categories to articles but also support for tagging of posts and articles.

As a developer, one can use the JSON API to fetch the data related to a post published on WordPress. The API is basically a WordPress plugin that allows you to retrieve and manipulate WordPress content using HTTP requests. For example, one could fetch all posts tagged “java” by executing an HTTP GET request to the following URL.


Through this post, we will learn how to fetch data from WordPress posts using the JSON API.

Pre-requisites: Eclipse IDE, Android SDK

Step 1: Installing JSON API plugin

Here I assume you already have a live WordPress website. Login to your WordPress account and install the JSON API plugin. Once installed, activate the plugin.

Step 2: Fetch data from WordPress post

Launch Eclipse IDE and create a new Android application project called AndroidWordPressDemo with package name com.app.wordpress. Create a new Activity class called FetchDataActivity and add the following code!


package com.app.wordpress;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONObject;
import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class FetchDataActivity extends Activity {

	private Button btnSubmit;
	private final static String URL = "http://www.karanbalkar.com/api/get_tag_posts/?tag_slug=sdcard";
	private TextView tvPostCount, tvPostTitle, tvPostUrl;

	protected void onCreate(Bundle savedInstanceState) {

		tvPostCount = (TextView)findViewById(R.id.txtPostCount);
		tvPostTitle = (TextView)findViewById(R.id.txtPostTitle);
		tvPostUrl = (TextView)findViewById(R.id.txtPostUrl);

		btnSubmit = (Button)findViewById(R.id.btnSubmit);
		btnSubmit.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				// TODO Auto-generated method stub
				new FetchDataTask().execute(URL);


	private class FetchDataTask extends AsyncTask<String, Void, String>{

		protected String doInBackground(String... params) {
			// TODO Auto-generated method stub
			InputStream inputStream = null;
			String result= null;
			HttpClient client = new DefaultHttpClient();
			HttpGet httpGet = new HttpGet(params[0]);

			try {

				HttpResponse response = client.execute(httpGet);
				inputStream = response.getEntity().getContent();

				// convert inputstream to string
				if(inputStream != null){
					result = convertInputStreamToString(inputStream);
					Log.i("App", "Data received:" +result);

					result = "Failed to fetch data";

				return result;

			} catch (ClientProtocolException e) {
			} catch (IOException e) {

			return null;

		protected void onPostExecute(String dataFetched) {
			//parse the JSON data and then display

		private String convertInputStreamToString(InputStream inputStream) throws IOException{
			BufferedReader bufferedReader = new BufferedReader( new InputStreamReader(inputStream));
			String line = "";
			String result = "";
			while((line = bufferedReader.readLine()) != null)
				result += line;

			return result;


		private void parseJSON(String data){


				JSONObject jsonResponse = new JSONObject(data);
				JSONArray jsonMainNode = jsonResponse.optJSONArray("posts");
				int postCount = Integer.parseInt(jsonResponse.getString("count"));

				int jsonArrLength = jsonMainNode.length();  

				for(int i=0; i < jsonArrLength; i++) {
					JSONObject jsonChildNode = jsonMainNode.getJSONObject(i);
					String postTitle = jsonChildNode.getString("slug");
					String postUrl = jsonChildNode.getString("url");
					tvPostCount.setText("Number of posts:" +postCount);
					tvPostTitle.setText("Page title:" +postTitle);
					tvPostUrl.setText("Page URL:" +postUrl);
			}catch(Exception e){
				Log.i("App", "Error parsing data" +e.getMessage());




<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    tools:context="${relativePackage}.${activityClass}" >

        android:text="@string/hello_world" />

        android:text="@string/fetchData" />

        android:layout_below="@+id/btnSubmit" />

        android:layout_below="@+id/txtPostTitle" />

        android:layout_below="@+id/txtPostCount" />


Note: Make sure you add the below INTERNET permission in your AndroidManifest.xml file.

 <uses-permission android:name="android.permission.INTERNET" />

Finally, save all changes. Make sure no errors are present and run the application on an Android device. Click on the button to view the corresponding output! 🙂


That’s it for this tutorial. Hope it helps. Stay tuned for more! 🙂

Populate Highcharts with JSON data using jQuery

Hello everyone!

Graphs and charts help make information easier to visualize. Developers can display charts for better analysis and understanding. Highcharts help develop interactive JavaScript charts for web pages. It is basically a charting library written in pure JavaScript, offering an easy way of adding charts to your web site or web application.

Through this post, we will learn how to populate and display a bar chart dynamically using JSON data received via a RESTful web service.

Pre-requisites: Eclipse IDE, Notepad , Apache Tomcat 7

Step 1: Create dynamic web project

Let’s first create a web project that exposes a web service to send JSON data. Launch Eclipse IDE and create a Dynamic Web Project called TestHttpJson. Create a new Service class called DataService and add the following code!


package com.example;

import java.util.HashMap;
import java.util.Map;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.Response;
import org.json.JSONArray;
import org.json.JSONObject;

public class DataService {

	@Context org.jboss.resteasy.spi.HttpResponse response;
	public Response getJSONData() {

		Map<String, String> data1 = new HashMap<String,String>();
		data1.put( "key", "Computers");
		data1.put( "value","114");

		Map<String, Object> data2 = new HashMap<String, Object>();
		data2.put( "key", "Electronics");
		data2.put( "value","214");

		Map<String, Object> data3 = new HashMap<String, Object>();
		data3.put( "key", "Mechanical");
		data3.put( "value","514");

		JSONObject json1 = new JSONObject(data1);
		JSONObject json2 = new JSONObject(data2);
		JSONObject json3 = new JSONObject(data3);

		JSONArray array = new JSONArray();

		JSONObject finalObject = new JSONObject();
		finalObject.put("student_data", array);

		response.getOutputHeaders().putSingle("Access-Control-Allow-Origin", "*");
		return Response.status(200).entity(finalObject.toString()).build();



<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">

	<!-- Auto scan REST service -->






Note: You need to include the REST API specific jars before running the application. Please refer this post for more information.

Now, run the project on the Tomcat server and enter the following URL,


You should see the JSON data in the browser page.


Step 2: Create HTML page

Next, we need to use HighCharts API to create our bar chart using JSON data of the web service. The jQuery.getJSON() method helps load JSON-encoded data from the server using a GET HTTP request.


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8" />
    <title>College student data</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript">
        $(function () {
				var processed_json = new Array();	
				$.getJSON('http://localhost:8080/TestHttpJson/rest/json', function(data) {
					// Populate series
					for (i = 0; i < data.student_data.length; i++){
						processed_json.push([data.student_data[i].key, parseInt(data.student_data[i].value)]);
				    // draw chart
					chart: {
						type: "column"
					title: {
						text: "Student data"
					xAxis: {
						allowDecimals: false,
						title: {
							text: "Branch of studies"
					yAxis: {
						title: {
							text: "Number of students"
					series: [{
						data: processed_json
    <div id="container" style="height: 400px"></div>

Finally, open the above HTML page in the browser. If no errors occur, then you should see the following output!



In addition, one can also use the various chart types and options for better customization. Hope this helps! Thanks for visiting! 🙂

Parsing JSON using Qt 5 framework

Hello friends!

In one of my previous posts, we had seen how to send a HTTP request using Qt. The response we got then was a JSON string. JSON is a subset of the object literal notation of JavaScript. It is basically a lightweight data-interchange format making it easy for humans to read and write. A JSON is build on two structures namely,

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list or associative array.

  • An ordered list of values. In most languages, this is realized as an array, vector, list or sequence.

  • A sample valid JSON looks as follows!


    An object is an un-ordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma). On the other hand, an array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).

    Through this post, we will learn to parse JSON using Qt 5.

    Pre-requisites: Qt Creator, MinGW compiler (Windows – 64 bit)

    Launch Qt Creator and create a new Qt console application project called TestJsonParsing. Choose the default Desktop kit.

    Now, let’s add our JSON parser code in the main.cpp file as follows!


    #include <QCoreApplication>
    #include <QDebug>
    #include <QApplication>
    #include <QtWebKitWidgets/QWebFrame>
    #include <QtWebKitWidgets/QWebPage>
    #include <QtWebKitWidgets/QWebView>
    #include <QNetworkAccessManager>
    #include <QNetworkRequest>
    #include <QNetworkReply>
    #include <QUrl>
    #include <QUrlQuery>
    #include <QWebSettings>
    #include <QVariant>
    #include <QJsonValue>
    #include <QJsonDocument>
    #include <QJsonObject>
    #include <QVariantMap>
    #include <QJsonArray>
    void sendRequest();
    int main(int argc, char *argv[])
        QCoreApplication a(argc, argv);
        return a.exec();
    void sendRequest() {
        // create custom temporary event loop on stack
        QEventLoop eventLoop;
        // "quit()" the event-loop, when the network request "finished()"
        QNetworkAccessManager mgr;
        QObject::connect(&mgr, SIGNAL(finished(QNetworkReply*)), &eventLoop, SLOT(quit()));
        // the HTTP request
        QNetworkRequest req( QUrl( QString("http://time.jsontest.com/") ) );
        QNetworkReply *reply = mgr.get(req);
        eventLoop.exec(); // blocks stack until "finished()" has been called
        if (reply->error() == QNetworkReply::NoError) {
            QString strReply = (QString)reply->readAll();
            //parse json
            qDebug() << "Response:" << strReply;
            QJsonDocument jsonResponse = QJsonDocument::fromJson(strReply.toUtf8());
            QJsonObject jsonObj = jsonResponse.object();
            qDebug() << "Time:" << jsonObj["time"].toString();
            qDebug() << "Date:" << jsonObj["date"].toString();
            delete reply;
        else {
            qDebug() << "Failure" <<reply->errorString();
            delete reply;

    .pro file

    QT       += core
    QT       -= gui
    QT       += network
    QT       += webkit webkitwidgets
    TARGET = TestJsonParsing
    CONFIG   += console
    CONFIG   -= app_bundle
    TEMPLATE = app
    SOURCES += main.cpp

    Save all changes. Build and run the application. If no errors are present then you should see the following output!


    That’s it then for this useful Qt tip. Hope it helps! 🙂

    Reference: QJsonDocument, QJsonArray