Search code examples
jsoncodeigniterbackbone.js

Need to display result json file in a view of a codeigniter using backbone


My API functions are.

function student_GET() {
    $response = $this->viewList();
    $this->response($response);
}

function viewList() {
     $this->load->model('model_student');
     $response = $this->model_student->getStudents();
     return $response;
}

and my model is,

function getStudents() {
    $sql= "SELECT * FROM students;
    $query = $this->db->query($sql);
    if ($query->num_rows() > 0) {
        return $query->result();
    } else {
    return NULL;
    }
}

API works fine and result json data is,

[
  {
    "id": "5",
    "subject": "English",
    "score": "93",
    "name": "john"
  },
  {
    "id": "9",
    "subject": "Maths",
    "score": "75",
    "name": "jack"
   }
]

I need to display these result details in a view using backbone.js Please help..


Solution

  • This is an example which will work on backbone and any JS libraries: "results" is your data coming from request

    success: function(results) {
       for (var i = 0; i < results.length; i++) {
                var tempData=[];
                            tempData[0] = results[i].get('subject');
                            tempData[1] = results[i].get('score');
                            tempData[2] = results[i].get('name');
                            tempData[3] = results[i].get('id');
                           // or tempData[4] = results[i].id;
      }
    }
    

    I have made another example, a backbone model which gets the data from json file: http://tennis.parseapp.com/

    Just in case I remove this host, the files are below. index.html:

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
            <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
            <script>
    
                $(function() {
                    var Profile = Backbone.Model.extend();
    
                    var ProfileList = Backbone.Collection.extend({
                        model: Profile,
                        url: 'profiles.json'
                    });   
    
                    var ProfileView = Backbone.View.extend({
                        el: "#profiles",
                        template: _.template($('#profileTemplate').html()),
                        render: function(eventName) {
                            _.each(this.model.models, function(profile){
                                var profileTemplate = this.template(profile.toJSON());
                                $(this.el).append(profileTemplate);
                            }, this);
    
                            return this;
                        }
                    });
    
                    var profiles = new ProfileList();    
                    var profilesView = new ProfileView({model: profiles});
                    profiles.fetch({
                        success: function() {
                            profilesView.render();
                        }
                    });
    
                });
            </script>
            <title>Fortified Studio</title>
        </head>
        <body>
            <div id="profiles"></div>
    
    
            <script id="profileTemplate" type="text/template">
                <div class="profile" style="margin-bottom: 21px;">
                    <div class="info">
                        <div class="name">
                            <%= name %>
                        </div>
                        <div class="title">
                            <%= title %>
                        </div>
                        <div class="background">
                            <%= background %>
                        </div>
                    </div>
                </div>
    
            </script>
        </body>
    </html>
    

    the profiles.json:

    [
        {
            "name": "Tim Cook",
            "title": "CEO",
            "background": "Tim Cook is the CEO of Apple and serves on its Board of Directors."  
        },
        {
            "name": "Angela Ahrendts",
            "title": "Senior Vice President of retail and online stores",
            "background": "Angela Ahrendts is Apple's senior vice president of retail and online stores, reporting to CEO Tim Cook."
        },
        {
            "name": "Eddy Cue",
            "title": "Senior Vice President of Internet Software and Services",
            "background": "Eddy Cue is Apple's senior vice president of Internet Software and Services, reporting to CEO Tim Cook."
        },
        {
            "name": "Craig Federighi",
            "title": "Senior Vice President of Software Engineering",
            "background": "Craig Federighi is Apple's senior vice president of Software Engineering, reporting to CEO Tim Cook."
        },
        {
            "name": "Jonathan Ive",
            "title": "Senior Vice President of Design",
            "background": "London-born designer Jonathan Ive is Apple's senior vice president of Design, reporting to CEO Tim Cook. "
        }
    ]