CODEWITHSUNDEEP
phpjqueryhtmljsonajax
d3fco
d3fco

Reputation: 120

output data of a .json file into php file in html table

guys, I would like to solve this I been stuck 2days on it, so i want to put in the table 2 value the one who say rank: 9074838 and the one in top 1 , value: 33 I have a .json file named: greenz_lewis.json who look like this 

      {
        "accountId": "6df47486-86d6-4b4b-a5e7-4c6b1b8c9322",
        "user": "greenz_lewis",
        "stats": {
                 "p2": {
                      "score": {
                          "label": "Score",
                          "category": "General",
                          "rank": 9074838,
                          },
                       "top1": {
                          "label": "Wins",
                          "value": "33",
                            }
                    }
             }

and I have my PHP file who looks like this 

<?php
  session_start();
  if ( $_SESSION['logged_in'] != 1 ) {
        $_SESSION['message'] = "You must log in before viewing your profile page!";
        header("location: error.php");    
    }
    else {
        // Makes it easier to read
        $username = $_SESSION['username'];
   }

?>
<!DOCTYPE HTML>
<html>
   <head>
       <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
  </head>
  <body class="is-preload">
      <section id="main" class="wrapper">
          <div class="inner">
              <table id="stats1">
                    <th>solo wins</th>                  
                    <th>duos wins</th>
                    <th>squad wins</th>
                    <th>total killz</th>
            </table>
  <script>
            $(document).ready(function(){ 

                $.ajax({
                    url:'userstats/<?=$_SESSION['username'] ?>.json',
                    dataType:"json",
                    success:function(data){
                        $(data.stats).each(function(index,value){
                            var record="<tr><td>"+(top1)+
                                "</td><td>"+top1.label+"</td><td>"+
                                 top1.value+"</td>"
                                "</td></tr>";
                                $("table").append(record);
                                });
                            }
                        });
                });
        </script>
    </div>
    </section>
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.scrollex.min.js"></script>
            <script src="assets/js/jquery.scrolly.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>
    </body>
</html>

so it doesn't work I have tried like 5 different ways this is the closest one

Upvotes: 0

Views: 918

Answers (1)

Alexandre
Alexandre

Reputation: 484

I notice some issues with your JSON file. You have extra commas and a missing bracket.

Here is a version without structure issues.

{
    "accountId": "6df47486-86d6-4b4b-a5e7-4c6b1b8c9322",
    "user": "greenz_lewis",
    "stats": {
        "p2": {
            "score": {
                "label": "Score",
                "category": "General",
                "rank": 9074838
            },
            "top1": {
                "label": "Wins",
                "value": "33"
            }
        }
    }
}

Then, I would suggest doing baby steps.

Get the content of the file

First, get the content of the file (whatever the extension is). You can reach this objective using the file_get_contents function for instance.

<?php

$content = file_get_contents("file.json");

var_dump($content);

would give

string(258) "{
    "accountId": "6df47486-86d6-4b4b-a5e7-4c6b1b8c9322",
    "user": "greenz_lewis",
    "stats": {
        "p2": {
            "score": {
                "label": "Score",
                "category": "General",
                "rank": 9074838
            },
            "top1": {
                "label": "Wins",
                "value": "33"
            }
        }
    }
}
"

Parse the content of the JSON file

Then, parse the string into an array. You may want to use json_decode function for that.

<?php

$decoded = json_decode($content, true);

var_dump($decoded);

would give

array(3) {
  ["accountId"]=>
  string(36) "6df47486-86d6-4b4b-a5e7-4c6b1b8c9322"
  ["user"]=>
  string(12) "greenz_lewis"
  ["stats"]=>
  array(1) {
    ["p2"]=>
    array(2) {
      ["score"]=>
      array(3) {
        ["label"]=>
        string(5) "Score"
        ["category"]=>
        string(7) "General"
        ["rank"]=>
        int(9074838)
      }
      ["top1"]=>
      array(2) {
        ["label"]=>
        string(4) "Wins"
        ["value"]=>
        string(2) "33"
      }
    }
  }
}

Create the table items

Next, let's create the table items.

<tr>
<td><?= $decoded['stats']['p2']['score']['rank']; ?></td>
<td><?= $decoded['stats']['p2']['top1']['value']; ?></td>
</tr>

would give

<tr>
<td>9074838</td>
<td>33</td>
</tr>

Gather everything

<?php

$content = file_get_contents('foo.json');

if (! $content) {
    // File doesn't exists
}

$decoded = json_decode($content, true);
if (! $decoded) {
    // Unable to parse JSON
}

?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Player</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Rank</th>
        <th>Value</th>
      </tr>
      <tr>
        <td><?= $decoded['stats']['p2']['score']['rank']; ?></td>
        <td><?= $decoded['stats']['p2']['top1']['value']; ?></td>
      </tr>
    <table>
  </body>
</html>

would give

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Player</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Rank</th>
        <th>Value</th>
      </tr>
      <tr>
        <td>9074838</td>
        <td>33</td>
      </tr>
    <table>
  </body>
</html>

result

I let you the joy to handle the redirection and handling errors in case the file doesn't exist or decoding JSON is failing.

Concerns

Be careful about how you write your table. The table you started has four columns but you wanted to append two values.

You are using Ajax but you don't need. The job of retrieving the content of a file can be done server-side.

Again, be careful about how you structure your JSON file.

Upvotes: 2

Related Questions