0

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"
}
]
Improve this question
5
  • What does the JavaScript error console say? Commented Apr 12, 2014 at 14:01
  • @Quentin Object not found! Error 404. Commented Apr 12, 2014 at 14:04
  • So your URL is wrong. Use the correct URL. Commented Apr 12, 2014 at 14:04
  • @Quentin data.json is not in some other folder. All files are in same folder. then y it's not accepting this file? Commented Apr 12, 2014 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. Commented Apr 12, 2014 at 14:08

2 Answers 2

Reset to default
3

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).

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

Comments

-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.

Improve this answer

4 Comments

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.
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.
As I said, you saved the file as data.json.txt
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.