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

Question

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

Suggest you start by logging the arguments of each callback to console so you can inspect what they are and react accordingly. Can't just make up variables like top1 and expect them to be defined out of thin air — charlietfl
– charlietfl, Commented Nov 3, 2019 at 1:40
Use console.log(someVariable) and open browser dev tools console (F12) to inspect output — charlietfl
– charlietfl, Commented Nov 3, 2019 at 2:46

Alexandre · Accepted Answer · 2019-11-03 02:05:31Z

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>

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.

Needing or not needing ajax is very subjective. One big advantage is faster initial page loads
this answer was the most helpful in my whole lifetime, thank you so much it worked right away the way I wanted it to work and your explanations were great I hope it will help someone in a similar problem, it helped me see it in a new way.

Collectives™ on Stack Overflow

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

1 Answer 1

Get the content of the file

Parse the content of the JSON file

Create the table items

Gather everything

Concerns

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Get the content of the file

Parse the content of the JSON file

Create the table items

Gather everything

Concerns

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related