Why Json data is not displaying in localhost?

Question

I am using Apache to run this program an trying to load Json data in my html page. Why this is not working?

HTML:

<head>
<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
</head>
    <body>
    <a href="#" id="car">Car</a>

    <div id="content">

    </div>
</body>

JQuery:

    $(document).ready(function() {

        $.getJSON('data.json',function(data){

            $('#content').empty();

            $.each(data, function(entryIndex, entry){
                var html = '<div class="data">';                      
                html += '<h3>' + entry['company'] + '</h3>';
                html += '<div class="product">' + entry['product'] + '</div>';                  
                html += '<div class="type">' + entry['type'] + '</div>';


                if(entry['color']){
                    html += '<div class="color">';                                          
                    html += '<ol>';
                    $.each(entry['color'],function(colorIndex, color){
                        html += '<li>' + color + '</li>';                          
                    }); 
                    html += '</ol>';                        
                    html += '</div>';   

                }
                $('#content').append(html);

            });                        
        });
        return false;

});

JSON (data.json):

[
{
    "company" : "Toyota",
    "product" : "Prius",
    "color" : [
      "white pearl",
      "Red Methalic",
      "Silver Methalic"
    ],
    "type" : "Gen-3"
},
{
    "company" : "Toyota",
    "product" : "New Fortuner",
    "color" : [
      "Super White",
      "Silver",
      "Black"
    ],
    "type" : "Fortuner TRD Sportivo Limited Edition"
}
]

Is the `data.json` file a file on the filesystem you are trying to load? Or does it come from a URL? — Giacomo1968, Apr 12 '14 at 13:51
@Quentin data.json is not in some other folder. All files are in same folder. then y it's not accepting this file? — madhu kumar, Apr 12 '14 at 14:07
You're calculating the URI relative to the wrong thing, or the server is aliasing files, or you have a case sensitivity issue, or you aren't visiting the URI you think you are. — Quentin, Apr 12 '14 at 14:08

score 3 · Answer 1 · answered Apr 12 '14 at 14:32

This answer is mostly pieced together from comments on the question and other answers.

Your JavaScript console reveals that the request is getting a 404 error
You stated that you are using Notepad to create the JSON file

Notepad has a tendency to stick .txt on the end of any file name when you SaveAs using it. This has caused you to end up with a file called data.json.txt which your server doesn't find because you are asking for data.json.

You can rename the file to fix this.

You could also use a different editor to create the file in the first place. Most text editors aimed at programmers will have explicit support for JSON (with features like syntax highlighting and auto indentation) and expect to deal with unusual file extensions (so won't add .txt in an effort to be helpful).

score -2 · Answer 2 · answered Apr 12 '14 at 14:13

-2

Created Json data from notepad file which is entirely wrong. It should be taken using any HTML editor like Notepad++ or Dreamweaver like softwares. Finally issue is fixed.

answered Apr 12 '14 at 14:13

madhu kumar

786
1
12
46

Notepad has no problems creating JSON. It is a serviceable text editor. Possibly your problem is that you didn't surround the filename with quote marks when you saved it causing Notepad to append a `.txt` file extension. – Quentin Apr 12 '14 at 14:15
Now my code is working. When i create html file using Notepad, it creates exactly the html file but while creating a json file saving as "data.json", it is still a notepad txt file not the json file. that's the problem. – madhu kumar Apr 12 '14 at 14:18
3

As I said, you saved the file as `data.json.txt` – Quentin Apr 12 '14 at 14:19
As @Quentin mentioned, this answer is just plain wrong. JSON files are just plain text files and are easily created / edited in any basic text editor, even Notepad. – Charlie74 Apr 12 '14 at 14:28

Why Json data is not displaying in localhost?

2 Answers2