how to display json data in html table? [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 9 years ago.

Improve this question

{
  "cache": true,
  "data": [
    {
      "unique_id": "958717",
      "description": "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 ",
      "title": "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 "
    },
    {
      "unique_id": "958715",
      "description": "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *",
      "title": "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *"
    },
    {
      "unique_id": "895971",
      "description": "Victoria v New South Wales 218/6 *",
      "title": "Victoria v New South Wales 218/6 *"
    },
    {
      "unique_id": "895969",
      "description": "South Australia 206/4 * v Tasmania 91/10 ",
      "title": "South Australia 206/4 * v Tasmania 91/10 "
    },
    {
      "unique_id": "895967",
      "description": "Queensland 147/10  v Western Australia 32/2 *",
      "title": "Queensland 147/10  v Western Australia 32/2 *"
    },
    {
      "unique_id": "971711",
      "description": "Mumbai Cricket Association XI v South Africa",
      "title": "Mumbai Cricket Association XI v South Africa"
    },
    {
      "unique_id": "951375",
      "description": "India Women v Bangladesh Women",
      "title": "India Women v Bangladesh Women"
    },
    {
      "unique_id": "951329",
      "description": "India v New Zealand",
      "title": "India v New Zealand"
    },
    {
      "unique_id": "951377",
      "description": "New Zealand Women v Sri Lanka Women",
      "title": "New Zealand Women v Sri Lanka Women"
    }
  ],
  "provider": {
    "pubDate": "2016-03-15T06:46:03.424Z",
    "source": "http://www.cricinfo.com/",
    "url": "http://crm.wherrelz.com/"
  }
}

I have this json data. I want to display title and description of each match in an HTML table. I used json_decode method of php which provided me this:

array(3) { ["cache"]=> bool(true) ["data"]=> array(9) { [0]=> array(3) { ["unique_id"]=> string(6) "958717" ["description"]=> string(64) "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 " ["title"]=> string(64) "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 " } [1]=> array(3) { ["unique_id"]=> string(6) "958715" ["description"]=> string(56) "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *" ["title"]=> string(56) "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *" } [2]=> array(3) { ["unique_id"]=> string(6) "895971" ["description"]=> string(34) "Victoria v New South Wales 218/6 *" ["title"]=> string(34) "Victoria v New South Wales 218/6 *" } [3]=> array(3) { ["unique_id"]=> string(6) "895969" ["description"]=> string(41) "South Australia 206/4 * v Tasmania 91/10 " ["title"]=> string(41) "South Australia 206/4 * v Tasmania 91/10 " } [4]=> array(3) { ["unique_id"]=> string(6) "895967" ["description"]=> string(45) "Queensland 147/10 v Western Australia 32/2 *" ["title"]=> string(45) "Queensland 147/10 v Western Australia 32/2 *" } [5]=> array(3) { ["unique_id"]=> string(6) "971711" ["description"]=> string(44) "Mumbai Cricket Association XI v South Africa" ["title"]=> string(44) "Mumbai Cricket Association XI v South Africa" } [6]=> array(3) { ["unique_id"]=> string(6) "951375" ["description"]=> string(30) "India Women v Bangladesh Women" ["title"]=> string(30) "India Women v Bangladesh Women" } [7]=> array(3) { ["unique_id"]=> string(6) "951329" ["description"]=> string(19) "India v New Zealand" ["title"]=> string(19) "India v New Zealand" } [8]=> array(3) { ["unique_id"]=> string(6) "951377" ["description"]=> string(35) "New Zealand Women v Sri Lanka Women" ["title"]=> string(35) "New Zealand Women v Sri Lanka Women" } } ["provider"]=> array(3) { ["pubDate"]=> string(24) "2016-03-15T06:46:03.424Z" ["source"]=> string(24) "http://www.cricinfo.com/" ["url"]=> string(24) "http://crm.wherrelz.com/" } }

But now how do get title and description of each cricket match in an html table. Please help me get this through.

We are not a code factory, try something yourself and then come with any issues that you are facing — Arun P Johny
– Arun P Johny, Commented Mar 15, 2016 at 7:32
'Please provide the code', no. We want to see your effort and help when you can't figure it out yourself. — Matthijs
– Matthijs, Commented Mar 15, 2016 at 7:33
I know how to decode it in php... after decoding I just need to know how to get the elements of "data" array in a table — Saif Shaikh
– Saif Shaikh, Commented Mar 15, 2016 at 7:33
See the answer, stackoverflow.com/questions/18395976/… and also demo at jsfiddle.net/URU5G/1 for better understanding — SKG
– SKG, Commented Mar 15, 2016 at 7:34

Dhaval Patel · Accepted Answer · 2016-03-15 07:47:32Z

1

Please check below code

HTML

<div id="div1"> </div>

Jquery

var datarecord=[
{
  "unique_id": "958717",
  "description": "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 ",
  "title": "Central Zone (Bangladesh) 30 * v North Zone (Bangladesh) 378/10 "
},
{
  "unique_id": "958715",
  "description": "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *",
  "title": "South Zone (Bangladesh) v East Zone (Bangladesh) 373/8 *"
},
{
  "unique_id": "895971",
  "description": "Victoria v New South Wales 218/6 *",
  "title": "Victoria v New South Wales 218/6 *"
},
{
  "unique_id": "895969",
  "description": "South Australia 206/4 * v Tasmania 91/10 ",
  "title": "South Australia 206/4 * v Tasmania 91/10 "
},
{
  "unique_id": "895967",
  "description": "Queensland 147/10  v Western Australia 32/2 *",
  "title": "Queensland 147/10  v Western Australia 32/2 *"
},
{
  "unique_id": "971711",
  "description": "Mumbai Cricket Association XI v South Africa",
  "title": "Mumbai Cricket Association XI v South Africa"
},
{
  "unique_id": "951375",
  "description": "India Women v Bangladesh Women",
  "title": "India Women v Bangladesh Women"
},
{
  "unique_id": "951329",
  "description": "India v New Zealand",
  "title": "India v New Zealand"
},
{
  "unique_id": "951377",
  "description": "New Zealand Women v Sri Lanka Women",
  "title": "New Zealand Women v Sri Lanka Women"
}
]
var records=$("<table/>").attr("id","tabcontent");
$("#record").append(records);
for(var j=0;j<datarecord.length;j++)
{
  var tr="<tr>";
  var td1="<td>"+datarecord[j]["unique_id"]+"</td>";
  var td2="<td>"+datarecord[j]["description"]+"</td>";
  var td3="<td>"+datarecord[j]["title"]+"</td></tr>";

  $("#tabcontent").append(tr+td1+td2+td3); 

}

answered Mar 15, 2016 at 7:47

Dhaval Patel

1,1066 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saif Shaikh Over a year ago

Thanks... Can u tell me how do I store json data coming from a url in a jquery variable?

Randy Over a year ago

It seems like you want to do some stuff in JS, maybe take some lessons Saif? Anyway, put that in a different question if you want any answer, but be sure to google.com it first!

Collectives™ on Stack Overflow

how to display json data in html table? [closed]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related