using backbone.js to connect a collection with a table

I have a REST service that provides me with a list in .JSON format like the one shown below:

[{"name":"Temperature","id":32,"description":"Temperature on desk","lastModifier":"admin","lastModification":"2013-07-17"},
{"name":"Presence","id":34,"description":"maDescription2","lastModifier":"admin","lastModification":"2014-01-14"}]

My goal is to display this list in a table using three attributes: name, description, and lastModification.

I've tried the following solutions:

However, I am having trouble understanding...

This is my code:

The model:

var sensors = Backbone.Model.extend({
    defaults: {
        name: "",
        id:"",
        description:"",
        lastModifier:"",
        lastModification:""
    },
});

The collection:

var SensorsCollection = Backbone.Collection.extend({
    model: sensors,
    url:'../../rest/groups'
});

The view:

var SensorsView = Backbone.View.extend({
    model: new sensors(),
    sensorsCollection: new SensorsCollection(),
    el: $("#sensorsDiv"),
    initialize: function(){

    },
    events:{
        "click #btnAddUser": "getSensors"
    },
    getSensors: function(){
        var tokenCookie;

        var name = "xtoken" + "=";
        var ca = document.cookie.split(';');
        
        for(var i=0; i < ca.length; i++) 
        {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) tokenCookie = c.substring(name.length,c.length);
        }
        
        if(tokenCookie == undefined){
            alert("Please log in!")
        }else{
            this.sensorsCollection.fetch({
                headers: {"X-Token": tokenCookie},
                statusCode:{
                    202: function(){

                    }
                }}
            );
        }
    }
});

var sensorsView = new SensorsView();

Answer №1

One suggestion is to update el: $("#sensorsDiv"), to el: "#sensorsDiv",


For a demonstration on utilizing templates, check out this Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the capabilities of the Swagger-generated Angular API client library for efficiently posting data in Angular 11

Trying to utilize the Angular API client library generated by Swagger from in Angular 11 has been successful for making API calls to retrieve results. However, the challenge lies in figuring out how to submit form data to the library. Any guidance or assi ...

Combine and convert an array of objects

Implementing JavaScript functional programming techniques, how can the `status` field of `arr1` be aggregated/counted and then transformed into an array of key/value objects in `arr2`? arr1 = [ {'task':'do something 1', 'status& ...

Tips for setting up an environmental variable in a node.js environment

I am a big fan of node.js, to the point where I want to incorporate it into my bash start up script ~/.bashrc. However, I am unsure of how to properly export variables. As of now, I am using this method: export PS1=`node ~/PS1.js` export PS2=`node ~/PS2. ...

Revamp Lazy Loading Image Function

I need to make changes to the javascript triggers 'ready' and 'ajaxStop' for the Lazy Load plugin. $(document).ready(function() { $("img.lazy").lazyload({ threshold:50, skip_invisible : false, effect: "fadeI ...

Using webpack's hash in JavaScript for cache busting

Can someone guide me on adding a hash to my js file name for cache-busting purposes? I've researched online but still uncertain about where to include the [hash] element. Any help would be appreciated. Provided below is a snippet from my webpack.conf ...

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Creating a replica of hackernews by utilizing the axios API. The NewItem.vue component is not receiving any data, resulting in an error — TypeError: Cannot read property 'title' of undefined. Can you identify what's causing this issue in t ...

The task "gulp js src - duplication and implementation of base" involves duplicating

My gulp task is set up to copy JavaScript files. The initial setup below did not work: gulp.src('./**/*.js', {base: '../src/main/'}) .pipe(gulp.dest('../target/dist')); After making some adjustments, the following code ...

Error: Unable to instantiate THREE.OrbitControls as a constructor

As I delve into the world of three.js, I've encountered an issue that has me stumped. Despite declaring the use of OrbitControls.js (CODE1) and seeing it in the THREE tree in the DOM (Figure 1), I keep running into the error: "TypeError: THREE.OrbitCo ...

When trying to pass an array to a servlet through ajax, receiving a null parameter is

Just starting out with ajax and encountering an issue. This is what I have set up: var myArray = [2324.031536 , 2355.015241 , 2397.099387 , 2444.286019]; $(document).ready(function() { ...

Is bundling a Node.js backend a wise decision or a mistake?

Just a thought that crossed my mind - I understand the advantages of bundling client-side code, but what about bundling server-side code with Browserify/Webpack? Is this considered a best practice? ...

Change the content inside a div depending on the value of a button

I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...

Why is it that RestSharp is having trouble deserializing the JSON it receives?

I am currently attempting to fetch a list of users from my JIRA system: options.Authenticator = new HttpBasicAuthenticator(_jiraConfig.UserName, _jiraConfig.Token); options.BaseUrl = new Uri(_jiraConfig.Url); _restClient = new RestClient(options); var requ ...

Problems with Web Audio API Implementation - struggling to make it functional

As a newcomer to the Web Audio API and not well-versed in JavaScript, I am trying to implement a specific function on a website that involves Google's TTS API. This function requires the returned Base64 audio to pass through a reverb filter and then a ...

Divide text to reduce its width within the confines of a specific height on a div element

I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution. In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and ...

Sending back JSON data in response to an AJAX request with speed and efficiency

I'm encountering a delay issue when my Servlet returns a JSON object to an ajax call. The JSON object is generated from an Excel file with 4000 rows, causing the call to take more than two minutes to reach the front end. After the JSON is formed, ther ...

What is the process for ensuring a script is executed each time data is retrieved from a WebMethod through AJAX?

I am facing an issue where the JavaScript script is only loaded once when the page is loading, but I need it to load every time I receive data from a WebMethod on the server side. Below is my code: JavaScript AJAX: <script type="text/javascript"> ...

Sending a photo to a customer and launching it in a fresh browser window or tab with MVC 5

My question may be simple, but I find myself a bit puzzled. In my application, whenever a user clicks on an image's thumbnail, the ID of that thumbnail is sent to a controller action using AJAX: [HttpPost] public ActionResult GetHiResImage(string thu ...

What steps can I take to make changes to this Javascript code without interrupting its functionality

Recently, I came across a piece of inherited code that I'm trying to modify to suit my needs. However, I seem to have reached a dead end with customizing it. It seems like the following code snippet is causing some issues: jQuery(function($){ var pho ...

Add an HTML template tag in Vuetify using scripting

This is my current template tag: <template> <h1>Explore in VR</h1> </template> Within my script tag, I've included the following code: var viewer = new AFrame.WebVRViewer(); viewer.setSize(window.innerWidth, window.innerHeig ...

Best practices for retrieving information from an array of identifiers?

As of now, I am attempting to utilize a list of ID's in order to retrieve the corresponding data associated with each ID. Below is my code: export const fetchAllRoomData = createAsyncThunk( "socket/fetchAllRoomData", async ({ nspData }, ...