Retrieving information from the server using Backbone to generate a model and assemble a collection

Question

Retrieving information from the server using Backbone to generate a model and assemble a collection

I need assistance with setting up a model and collection for a URL that returns a list of players in JSON format:

http://anexampleproject/api/players

My goal is to create a model and collection for this data and then display the name of each player in the console. Can someone guide me on how to achieve this?

Here is an example of the JSON returned by the URL:

 [
       {
          "id": 1,
          "name": "Lily",
          "age": 14,
          "city": "New York"
       },
       {
         "id": 2,
         "name": "BIlly",
          "age": 14,
          "city": "New York"
      }
    ]

javascript json backbone.js

Answer 1

Answer №1

var data = [{
    "id": 1,
    "name": "Lily",
    "age": 14,
    "city": "New York"
}, {
    "id": 2,
    "name": "BIlly",
    "age": 14,
    "city": "New York"
}];

var MyModel = Backbone.Model.extend({
    defaults: {
        "id": "",
        "name": "",
        "age": 0,
        "city": ""
    }
});

var MyCollection = Backbone.Collection.extend({
    model: MyModel
});

var myCollection = new MyCollection(data);

EDIT:

Using a different approach

var MyCollection = Backbone.Collection.extend({
    url: "http://anexampleproject/api/players",
    model: MyModel
});

var myCollection = new MyCollection();
myCollection.fetch({
    success: function(){

    },
    error: function(){

    }
});

Answer 2

var data = [{
    "id": 1,
    "name": "Lily",
    "age": 14,
    "city": "New York"
}, {
    "id": 2,
    "name": "BIlly",
    "age": 14,
    "city": "New York"
}];

var MyModel = Backbone.Model.extend({
    defaults: {
        "id": "",
        "name": "",
        "age": 0,
        "city": ""
    }
});

var MyCollection = Backbone.Collection.extend({
    model: MyModel
});

var myCollection = new MyCollection(data);

EDIT:

Using a different approach

var MyCollection = Backbone.Collection.extend({
    url: "http://anexampleproject/api/players",
    model: MyModel
});

var myCollection = new MyCollection();
myCollection.fetch({
    success: function(){

    },
    error: function(){

    }
});

Retrieving information from the server using Backbone to generate a model and assemble a collection

Answer №1

Similar questions

Guide to invoking the NPM request multiple times within the mocha before hook

What is the process for implementing a title search filter in Vue.js?

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

Using Angular.js, apply the "visible" class conditionally based on a variable

Warning: Unidentified JavaScript alert(notification) encountered without declaring a

What is the correct way to send a GET request in angular?

The ios browser environment is unable to retrieve the value during vuejs development

Expanding a collection of text inputs on-the-fly (HTML/JavaScript)

Convert the array of strings into JSON format and send it

Convert object to JSON format using AJAX request to a PHP file

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

I keep encountering a 404 error page not found whenever I try to use the useRouter function. What could

Gaining entry to information while an HTML form is being submitted

Transferring image Buffer over API for uploading to IPFS network

jQuery does not change the scroll position of elements

The map is not displayed on the leaflet

I am having trouble comprehending this specific type definition within a properly formatted JSON Schema

The code line "npx create-react-app myapp" is not functioning as expected

Sorting table tbody elements created dynamically with JavaScript on an npm webpack application is not possible with jQuery UI

How does Jasmine compare to the second parameter with the toBeCloseTo function?