CODEWITHSUNDEEP
javascriptjqueryhtmljson
iSpeakBinary
iSpeakBinary

Reputation: 11

Problem when reading from JSON file using javascript

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript">
    $(function() {


        $("#Button1").click(function() {

           $.getJSON("ticketPriceInArray.js", 
        function(json) {
       var ticketPriceArray=[json.tickets[0].price, json.tickets[1].price,               
                json.tickets[2].price, json.tickets[3].price, json.tickets[4].price, 
                json.tickets[5].price];

                         alert(json.tickets[0].type);

         var inputWord =$("#keyword").val();
             if (inputWord=="A"){$("#result").text(ticketPriceArray[0]);}   
             if (inputWord=="B"){$("#result").text(ticketPriceArray[1]);}
             if (inputWord=="C"){$("#result").text(ticketPriceArray[2]);}   
             if (inputWord=="D"){$("#result").text(ticketPriceArray[3]);}   
             if (inputWord=="E"){$("#result").text(ticketPriceArray[4]);}   
             if (inputWord=="F"){$("#result").text(ticketPriceArray[5]);}       
         });

       });
  });    
  </script>

Here is "ticketPriceInArray.js"

{ 
"tickets":[
      {
    "type":"A Ticket",
    "price":220,
  },

  {
    "type":"B Ticket",
    "price":180,
  },

  {
    "type":"C Ticket",
    "price":120,
  },

  {
    "type":"D Ticket",
    "price":100,
  },

  {
    "type":"E Ticket",
    "price":80,
  },

  {
    "type":"F Ticket",
    "price":50,
  }
  ]
}

This is a simple html where when the corresponding text inputed, the corresponding ticket price will show in the html after a button-click. All the ticket info is stored in a .json file named "ticketPriceInArray.js" and I have been trying to read it using $.getJSON(), but unfortunately I haven't been able to get any success. The weird thing is I didn't get any warning on anything so I couldn't fix it. Please see if you can give me any suggestions. Thank you.

Upvotes: 1

Views: 816

Answers (4)

natedavisolds
natedavisolds

Reputation: 4295

A little bit different approach to solving this problem. This is assuming that you aren't changing your ticket prices based on some data that you pass to the url.

ticketPriceInArray.js

{ 
    "A" : 220,
    "B" : 180,
    "C" : 120,
    "D" : 100,
    "E" : 80,
    "F" : 50
  };

main file

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>

<script type="text/javascript">

  var ticket_prices = {};

  $(function() {
     $("#Button1").click(function() {

        $.getJSON("ticketPriceInArray.js", function(returnedJSON) {
            ticket_prices = returnedJSON;
            $("#result").text( ticket_prices[ $("#keyword").val() ] );
        });

     });
  });    
</script>

If there are any considerations (or questions about my assumptions) let me know and I will update based on that.

Upvotes: 1

user520458
user520458

Reputation:

The following example is working fine in FF and Chrome with the exact JSON you provided. In IE you will have to remove the commas after the prices, as Phil already said.

In my test both the test.html and test.js were placed in my apache server root; viewing the files directly from my desktop into my browser didn't work apparently due to security restrictions.

<html>
<head></head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $.getJSON("test.js", function(json) {
                    for (var i in json.tickets) {
                        var type = json.tickets[i].type;
                        var price = json.tickets[i].price;
                        $('#result').append('<span>type: ' + type+ ', price: ' + price + '</span><br />');
                    }
                });
            });
        });
    </script>
    <button id="Button1">click me</button>
    <div id="result"></div>
</body>
</html>

I suggest you use http://jsonlint.com/ to validate your JSONs; or just rely on a good encoder instead of doing it by hand ;)

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117314

Assuming the following facts:

  • you're using firefox
  • there is no traffic in the network-tab when you click on #Button1
  • there are no errors logged

... I would like to say:
the element you click on is not $("#Button1")

Are you sure that the element you click on has the ID "Button1" and that there is only one element using that ID ?

Are you running this from a webserver or from your local filesystem?

Upvotes: 0

Phil
Phil

Reputation: 164733

By adding an AJAX error handler, I received this

"parsererror" SyntaxError: Unexpected token }

The problem is the trailing commas after each price property.

Upvotes: 2

Related Questions