将JSON数据匹配到javascript对象

Question

I am trying to setup a sample set of data in JSON format for a javascript tutorial I am working through.

The data object looks like this in javascript:

app.Book = Backbone.Model.extend({
    defaults: {
        coverImage: 'img/getfile.jpg',
        title: 'No title',
        author: 'Unknown',
        releaseDate: 'Unknown',
        keywords: 'None'
    }
});

And here is the data JSON sample I am creating in my .net server that I will be retrieving to populate the object above.

    Private Shared Books As String =
   <test>
        [
            { 
                 "Book" : [
                    "coverImage" : "",
                    "title" : "Enders Game",
                    "author" : "Orson Scott Card",
                    "releaseDate" : "1/1/1965",
                    "keywords: "science fiction"
                ]
            }
        ],
        [
            { 
                "Book" : [
                    "coverImage" : "",
                    "title" : "Parable of the Sower",
                    "author" : "Octavia E. Butler",
                    "releaseDate" : "1/1/2000",
                    "keywords: "science fiction"
                ]
            }
        ],
        [
            { 
                "Book" : [
                    "coverImage" : "",
                    "title" : "Fahrenheit 451: A Novel",
                    "author" : "Ray Bradbury",
                    "releaseDate" : "1/1/1950",
                    "keywords: "science fiction"
                ]
            }
        ]
    </test>.Value.Trim()

However, whenever I try to retreive the data using GET, I get an 'object not in specified format' error in my console.

So my question is, does my JSON data format match up to the javascript object?

Thanks!

Answer 1

I think your JSON array is in an incorrect format because, when you define the model using Backbone.Model.extend , you pass in an object; defaults: { ... } but when you are constructing this in your JSON, you are constructing this as an array [] , not an object {} , which I believe is what it is expecting.

Example (I've tested this with JsonLint )

[ // This is the syntax notation for an array in JSON / JavaScript.
    {   // An array can only hold objects (not key/value pairs), so lets wrap each instance of "Book" as an object.
        "Book": { // Book can now be defined as a set of key/value pairs.
            "coverImage": "",
            "title": "Enders Game",
            "author": "Orson Scott Card",
            "releaseDate": "1/1/1965",
            "keywords": "sciencefiction"
        }
    },
    {
        "Book": {
            "coverImage": "",
            "title": "Fahrenheit 451: A Novel",
            "author": "Ray Bradbury",
            "releaseDate": "1/1/1950",
            "keywords": "sciencefiction"
        }
    },
    {
        "Book": {
            "coverImage": "",
            "title": "ParableoftheSower",
            "author": "OctaviaE.Butler",
            "releaseDate": "1/1/2000",
            "keywords": "science fiction"
        }
    }
]

This is what is breaking your code, in part, because, key/value pairs cannot be direct members of an array:

"Book" : [
                    "coverImage" : "",
                    "title" : "EndersGame",
                    "author" : "OrsonScottCard",
                    "releaseDate" : "1/1/1965",
                    "keywords: "science fiction"
]

Try run the above two snippets in JsonLint and see what happens.

Consideration:

If you server-side code knows that it is expecting an array of type Book, you can actually simplify this JSON, like so:

[
    { // Your code knows it's expecting "Book", so lets just add the properties of each "Book" here...
        // You don't always need to be explicit with your naming of objects as often, the server will know how to handle this.
        "coverImage": "",
        "title": "Enders Game",
        "author": "Orson Scott Card",
        "releaseDate": "1/1/1965",
        "keywords": "sciencefiction"
    },
    {
        "coverImage": "",
        "title": "Fahrenheit 451: A Novel",
        "author": "Ray Bradbury",
        "releaseDate": "1/1/1950",
        "keywords": "sciencefiction"
    },
    {
        "coverImage" : "",
        "title" : "ParableoftheSower",
        "author" : "OctaviaE.Butler",
        "releaseDate" : "1/1/2000",
        "keywords": "science fiction"
    }
];