PHP results not displaying in HTML

Question

I've read through multiple of these articles but nothing worked for me so would really appreciate if someone could assist. Im trying to display the Full_Name field into an HTML element on my webpage.

The PHP file is as follows:

{"Test_Info": {
    "Company_Info": {
        "Company_ID": "2",
        "Company": "Test Company",
        "Full_Name": "Test User"
    }}

I'm using the below code in the body of my HTML code:

<body id="startscreenBG">

       <div class="hello"> </div>

</body>
        <script>
                    $.ajax({
                    type:'GET',
                    url:'jsondata.php',
                    data:'json',
                    success: function(data){
                            var newhtml = ''; 
                            $.each(data, function(i, item) {
                                    newhtml +='<div>'+ item.Full_Name +'</div>'; 
                            });
                            $('.hello').html(newhtml); 
                            }})
         </script>
</html>

JSON data is not PHP, just saying. But seriously, I would do `console.log(data)` in your Ajax callback to see if that JSON is JSON and not a string etc. If it's a string you will have to add the `application/JSON` content header `header('Content-Type: application/json')` before outputting the JSON. — ArtisticPhoenix, Oct 29 '17 at 10:27
Not sure if it's just a misspelling in the PHP snippet you posted in your question, but it does not hold a valid JSON object. You are missing an ending `}`. — agrm, Oct 29 '17 at 10:37

Lukas Lukac · Answer 1 · 2017-10-29T11:55:55.523

It's not the HTML issue you are facing but the data looping issue. Open console (F12) and make sure the XHR request is actually returning what you expect. Then write: debugger; above the line: var newhtml = ''; and check the content of the data variable.

Then make sure your looping function works as you expect:

$.each(data, function(i, item) {
    debugger; 
});

You will realise that the "item" variable doesn't hold your expected object with attribute: "Full_Name".

Basically when you run into an issue, the way you can solve it, is to debug your code step by step and ensure that every function is doing what is suppose to do and each variable has the expected content.

The reason you ended up in this scenario is because you are using vague names like: "data". Your content actually holds "unparsedCompanyCollection". I would suggest to also get used to precise variable names and it will help you in debugging and with a clean code in general over long term.

score 0 · Answer 2 · answered Oct 29 '17 at 10:32

Just a guess, but you may be returning a string of Json data and not actual json data. Usually you can just add the content header in before outputting to fix it.

In you PHP file that makes the JSON add

header('Content-Type: application/json');

before outputting your data.

In your success callback you can do some debugging to see

  ...
  success: function(data){
      console.log( data );  // Or even just alert(data); if it's a string then you know.
      ...
   }

Another way to fix it is with JSON.parse( data )

agrm · Answer 3 · 2017-10-29T10:46:10.290

0

You should change data:'json' to dataType:'json'. Also you are trying to output item.Full_Name. This should be item.Company_Info.Full_Name. Your ajax call should be:

$.ajax({
    type:'GET',
    url:'jsondata.php',
    dataType:'json',
    success: function(data){
        var newhtml = ''; 
        $.each(data, function(i, item) {
            newhtml +='<div>'+ item.Company_Info.Full_Name +'</div>'; 
        });
        $('.hello').html(newhtml); 
    }
});

And you should correct your PHP to hold a valid JSON object (note you are missing an ending } in the code posted in your question)

{"Test_Info": {
    "Company_Info": {
        "Company_ID": "2",
        "Company": "Test Company",
        "Full_Name": "Test User"
    }
}}

edited Oct 29 '17 at 10:46

answered Oct 29 '17 at 10:40

agrm

3,735
4
26
36

thank you, I've managed to correct the ajax call and also made sure that the json object is correct. i re-ran the code and got no errors, it just still doesn't output anything, do you know what else could be causing the issue? – PoolHall Junkie Oct 29 '17 at 11:19
What is displayed in your console if you do `success: function(data){console.log(data)}`? – agrm Oct 29 '17 at 11:31
And have you tried to add `header('Content-Type: application/json');` to the PHP as [@ArtisticPhoenix suggested](https://stackoverflow.com/a/46999132/2311559)? – agrm Oct 29 '17 at 11:32
yes i have, I'm just double checking the data in console log – PoolHall Junkie Oct 29 '17 at 11:49
so i added the logs and didn't get any messages in the console. on the network tab i did see that the html page, css page etc had a value in size and transferred, the php file though only had info in the transferred field. Something else that i noticed was that my php file was performing a post function and the ajax was using a get function. could these be causing the issues? – PoolHall Junkie Oct 29 '17 at 12:58
also when i execute the php file on its own it returns data correctly – PoolHall Junkie Oct 29 '17 at 12:59
It could be a problem with how the PHP responds to the ajax call. In your Network tab, select the PHP file and then the Preview or Response tabs. These should display the returned JSON object. – agrm Oct 29 '17 at 13:13
I suggest you update your question and include the relevant parts of your PHP file, not only the output :o) – agrm Oct 29 '17 at 13:14
thanks a lot, so after having some coffee i came back and re-ran it and it worked...im scared to try decode what i did :O – PoolHall Junkie Oct 29 '17 at 13:21
Glad things worked out for you! :o) And to prevent cache issues when debugging (if that was the case here) you can bust cache on AJAX calls [this way](https://stackoverflow.com/questions/26763698/disable-cache-on-php-and-html-with-ajax). – agrm Oct 29 '17 at 13:28

PHP results not displaying in HTML

3 Answers3