CODEWITHSUNDEEP
javascriptjsonbackbone.js
user3170424
user3170424

Reputation: 3

Syntax Error in Json while fetching in backbone.js

I am trying to fetch the data from the JSON, and trying to display it. While fetching the json, it is throwing error in fetch. I am stuck at this point from so many days, and after reading from google, I am confused. Can anyone please help me out what is the error and how to proceed.

<!DOCTYPE html>
<html>
     <head>
  <title>Fortified Studio</title>
 </head>
 <body>test

  <div id="profiles"></div>

        <script id="profileTemplate" type="text/template">
            <div class="profile">
                <div class="info">
                    <div class="name">
                        <%= name %>
                    </div>

                </div>
            </div>
        </script>
  </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>   
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
    <script>
    $(function() {
        console.log("start of script");
    var Prof = Backbone.Model.extend({});
    var ProfList= Backbone.Collection.extend ({
    model: Prof,
    url : '/data/testjson2.json'

    }); 
    var ProfView = Backbone.View.extend ({

        initialize: function (){
            console.log("View initialize");
            this.render();
        },
        render : function (){
            console.log("in render");
            template: _.template($('#profileTemplate').html()),
            _.each (this.collection, function(Prof) {
                var profileTemplate = this.template(Prof.toJSON());
                $(this.el).append(profileTemplate);
            }, this);
            console.log (this);
            return this;
        }


    });


 var profs = new ProfList ();
 var profViews = new ProfView ();
  new ProfList().fetch({
      sucess : function(){
          console.log('json loaded');
      },
      error: function (){
            console.log("error retrieving model");
      }

  });

     profViews.render();
  }); 




    </script>

</html>

and my JSON is:-

[
    {
        "name": "Johny Johny",          
    },
    {
        "name": "Jack n Jill",
    }
]

and output on console is:-

.......
Unknown property 'box-sizing'.  Declaration dropped.               myFile.html
"start of script"                                                 myFile.html:27
"View initialize"                                                 myFile.html:37
"in render"                                                       myFile.html:41
[object Object]                                                   myFile.html:47
"in render"                                                       myFile.html:41
[object Object]                                                   myFile.html:47
 GET /data/testjson2.json        [HTTP/1.1 200 OK 3ms]
syntax error                                                      testjson2.json:1
 "error retrieving model"                                          myFile.html:62

Please help me out, how to proceed.

Upvotes: 0

Views: 256

Answers (1)

Toby
Toby

Reputation: 1671

Remove the commas at the end of each value set.

[
  {
    "name":"Johny Johny"
  },
  {
    "name":"Jack n Jill"
  }
]

Test your JSON with: http://jsonformatter.curiousconcept.com/

Upvotes: 1

Related Questions