From a user profile page need to pull only one JSON string for users and display using jQuery

Question

I need to pull only the single user from the data base on a case The flowing I am trying to achieve:

• start on a page that displays all users(Which I have done)
• click on a specific user
• then it navigates to the page I am trying to have render all the data on that specific user.

I currently am modeling it off the loop I created for the all users page. I know I need to get rid of the loop but I am not sure how to display the same information. I need help figuring out what to use instead of the loop below. The second group of texts shows you what I have already(inclucing the loop). Thanks!

    $(document).ready(function () {
      $.ajax({
      url: "http://.../getaccount",
      type: 'GET',
      dataType: "json",
      data: {
        'account': 'all'
    },
    // once json data is retrieved with the get request using ajaax then display teh following table rows.
    }).then(function (data) {
    // for loop for looping through th elenght o fth json data
    for(var i = 0; i < data.accounts.length; i++){
        // creates the table row every time a new instance is created
        $('#myTable tbody').append("<tr>");
        // pulls image source for each individule user and displays it 
        $('#myTable tbody').append("<td class=\"photo_url\">" + ("<img src='" + data.accounts[i].photo_url + "'/>") + "</td>");
        // displays Turbo user name in a new instance of a user
        $('#myTable tbody').append("<td class=\"user_id\">" + data.accounts[i].user_id + "</td>"); 
        // displays user real name in  
        $('#myTable tbody').append("<td class=\"name\">" + data.accounts[i].name + "</td>");
        // displays individule session token for each user.
        $('#myTable tbody').append("<td class=\"session_token\">" + data.accounts[i].session_token + "</td>");
        // $('#myTable tbody').append("<td class=\"photo_url\">" + data.accounts[i].photo_url + "</td>");   
        $('#myTable tbody').append("</tr><br>"); 
    }
});

console.log('finished');
});

    $(document).ready(function () {
$.ajax({
    url: "http://.../getaccount",
    type: 'GET',
    dataType: "json",
    data: {
        'account': 'all'
    },
    }).then(function (data) {
    // for loop for looping through th elenght o fth json data
    for(var i = 0; i < data.accounts.length; i++){
        // i need to find a way to pull the user data from 
        // the indivifule and not  on  loop possibly using the 
        // $(this) method 
        $('body .head').append("<div class=\"photo_url\">" + ("<img src='" + data.accounts[i].photo_url + "'/>") + "</div>");
        $('body .head').append('<h1 class="user_id">'+ data.accounts[i].user_id + '</h1>');
        // finding total matches but using dummy data for now.
        // $('body .sideUl').append('<li class="total_matches">' + data.account[i].total_matches +'</li>');
        $('body .sideUl').append('<li class="total_matches">' + "Total Matches" +'</li>');
        // same thing as above: code is ready to be run but not set up on the server right meow.
        // $('body .sideUl').append('<li class="total_wins">' + data.account[i].total_wins +'</li>');
        $('body .sideUl').append('<li class="total_wins">' + "Total Wins" +'</li>');
    }
});
    console.log("got info")
});

Answer 1

First off I agree with @Zhihao, that is good advice. +1. My approach may be similar at points, but I'll illustrate it differently.

Please answer the numbered questions:

1. Confirm (for me) that you have all the data that you need from the first AJAX call for both pages. Yes or No? If yes, avoiding the duplicate call is good. We can explore your options. If no, this specifies what the second call should be getting. For example, maybe the API is incorrect.

I'll break these apart:

Yes, you are getting all the data you need on the first page request. Then, on click - you now know the user that is selected, and have all the data for that user. Yes? Yes!

From there the challenge is - How to get that data to the details page - which depends on your architecture.

*a) If you are in a single page application (SPA), or MVC, * this becomes trivial, we just need to pass the ID(unique identifier) of the user to the new layout(like a function parameter), and have it pull that data (using the ID parameter) from the stored result(model), then render that layout (view) to screen.

But... from some hints in your question I am thinking you are shaking your head about now. SPA would be the ideal situation for you here. But if no, we continue...

2. Confirm (for me) Single Page Application architecture or MVC like Backbone.js? Or any other js frameworks please.

b) If your pages are rendered from server, like most everything Java, you can tell the page which user was requested with a query string parameter on the end of the url. Looks something like this:

http://www.example.com/userpage.html?user=12345

But again, this is probably not your architecture. Confirm if it is

c) One other option is that the service API is wrong, or your call to it is wrong.

There is a common pattern for this sort of problem called the Master/Detail pattern. The idea is that the list of users is the 'master', and the individual user is the 'detail'.

Maybe, instead of calling for extra data twice, these should be two AJAX calls, but two different calls - one for all users:

data: {
    'account': 'all'
},

then a second for the specific data:

data: {
    'account': data.accounts[i].user_id
},

I'm hoping that is the answer. You can test this solution by copying and pasting a real ID into your code at that point, for example:

data: {
    'account': '123real-id456'
},

And see if data comes back. :)

3) Use the step-debugger in chrome dev tools. This is key. Because you can see all the data just by clicking or hovering over the 'data' object.

You can get this easily by typing debugger:

}).then(function (data) {
  debugger;

This will freeze code execution at that line of code, when you are on the source tab, then you can see the contents of data and know if you have the correct call or not. If the user call works, you should be ok. But if it skips the breakpoint, the call may be quietly returning error from the server.

It is a good idea to invest time googlin' a tutorial on chrome step-debugger.

4) Please confirm that the code above is in separate files? If all that code is in one js or html we need to discuss something else. But I don't see any click handler, so I am guessing this is not the case.

Hope that helps.