CODEWITHSUNDEEP
javascriptjqueryjson
Deepak
Deepak

Reputation: 65

open new page with json data without refreshing page

Hi i have one json of users from which i have fetched data and populated list of user.. now here is the tweak When user clicks on this list od user, page (Screen 2) opens in same window without page refresh or redirection with all the information of that particular user with his details present in json.

{
    "data": {
        "show_dashboard_access_page": false,
        "login_status": "signedin",
        "new_io": true,
        "bst_users": [{
            "userA": {
                "user_logo": "image path",
                "partner_since": "Jan 2013",
                "status_now": "bronze",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 123000,
                "storage_wise_usage": 73000,
                "server_wise_usage": 50000,
                "order": 1
            },
            "userB": {
                "user_logo": "image path",
               "partner_since": "Feb 2014",
               "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 160000,
                "storage_wise_usage": 60000,
                "server_wise_usage": 100000,
                "order": 2
            },
            "userC": {
                "user_logo": "image path",
                "partner_since": "Mar 2014",
                "status_now": "silver",
                "year_calculated": 2016,
                "total": 300000,
                "year_wise_usage": 180000,
                "storage_wise_usage": 80000,
                "server_wise_usage": 100000,
                "order": 3
            }
            }]
    },
    "success": true
}

code till to fetch the user list on screen 1:

$.getJSON( "jsonpath", function( response ) {
  $.each(response.data.bst_users, function(idx,obj){
         $.each(obj, function(key, value){
            console.log(key + ": " + value);
            var item = "<li> <a href=''> <small> <img src='" +   value["user_logo"] + "' alt=''/></small>" + "<span>" + key +  "</span>" + "</a>    </li>"
             $('ul').append(item);
           });
    });
 });

Upvotes: 0

Views: 62

Answers (2)

4thex
4thex

Reputation: 1166

Here is an example that shows what I mean:

<!doctype html>
<html ng-app="app">
    <head>
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-controller="UsersController">
            <div id="users">
                <div ng-repeat="user in users">
                    <a href ng-click="go(user.id)">{{user.name}}</a>
                </div>
            </div>
            <div id="user">
                <div>{{current.name}}</div>
                <div>{{current.age}}</div>
                <a href ng-click="back()">back</a>
            </div>
        </div>
    </body>
</html>

The JavaScript file; app.js:

(function(){
    var app = angular.module("app", []);
    users = [
        {"id": 1, "name": "Palle", "age": "48"},
        {"id": 2, "name": "Peter", "age": "11"}
    ];
    app.controller("UsersController", ["$scope", "$http", function($scope, $http) {
        $("#user").hide();
        $scope.users = users;
        $scope.go = function(id) {
            console.log(id);
            $("#users").hide();
            $("#user").show();
            $scope.current = $scope.users.find(function(element) {
                return element.id === id;
            });
        };
        $scope.back = function() {
            $("#user").hide();
            $("#users").show();
        };
    }]);
}());

Upvotes: 1

4thex
4thex

Reputation: 1166

Consider using AngularJS. It is perfect for this kind of thing. In the controller for the link simply replace the main div with one containing the single user information. You should consider having two different feeds; one for the list of users and one for an individual user.

Upvotes: 0

Related Questions