call multiple APIs synchronously and show results immediately - json

Question

Am working in jQueryMobile and PhoneGap.
Currently am facing a Big issue. When I click a button and at that time its calls multiple APIs one by one and get results one by one. But in result page its shows only after getting all the Results of all API.
In My Application When I Submit the Button and It return a JSON which contains the list of Different APIs to Call
Then We call each API asynchronously.
We get all the result one by one. And Result is showing only after get all the results.
Then My Question is is there any way to shows the result page when I get First API Result and call all other API at that same time when Data shown in Result page in background?
Currently for shows the result Page it takes more than 30 seconds time. But We need to shows the result page when we get first API result. We get result as JSON Format.
Anybody please can help Me :(
i lost my 1 week for resolve this issue !!

Answer 1

There are a number of HTML template solutions are available jQuery Templates, Underscore, and Mustache etc, better to use Mustache i think that solves your problem. its better to use any templates if you are working on so many DOM manipulation in your projects.
Eg:
HTML Template
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li>{{name}}</li>
{{/link}}
{{/items}}
{{#empty}}
<p>The list is empty.</p>
{{/empty}}
JSON DATA
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}
Out put HTML
<h1>Colors</h1>
<li><strong>red</strong></li>
<li>green</li>
<li>blue</li>