Once loaded json data (using AJAX) into list, how to update the content when one of those list items are clicked?

Question

I have set up an ajax call that accesses a json file, and creates a list on the page (shown below).

However, the main section of the page should update with the picURL,location,summary... Do I have to call the AJAX an access an array each time, or should I store this data with the client so only one AJAX call has to be called?

Thanks! (website can be seen here http://bit.ly/1UAzjeo)

[
    {
        "picURL": "https://onsemble.net/wp-content/themes/Onsemble-2015/images/icon-account.png",
        "name": "Frank Harris",
        "title": "UX Designer",
        "location": "Cupertino, California",

        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim erat, lobortis at quam in, elementum consectetur libero. Sed lobortis, ante vitae ornare consequat, elit nisi tincidunt velit, nec lacinia urna elit quis libero.",
        "education": ["University of Oxford", "Applied Mathamatics", "Expected: First", "2013 - present"],
        "experience": ["Google Inc", "UX Designer", "2013 - present", "", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim erat, lobortis at quam in, elementum consectetur libero. Sed lobortis, ante vitae ornare consequat, elit nisi tincidunt velit, nec lacinia urna elit quis libero."],

        "coverLetter": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ex et nisl egestas mollis et at dolor.Sed fringilla, arcu quis tincidunt efficitur, ante dui elementum purus, a consectetur nisi sem ac nibh. Curabitur ut leo id lectus aliquet hendrerit ac aliquam est. Mauris posuere interdum eros, vel sollicitudin justo pharetra quis. Vivamus interdum elit quam, a fermentum massa vehicula non. Quisque ac ultricies orci. Curabitur semper pellentesque sapien. Maecenas sed arcu eget felis vulputate mollis. Aenean congue lorem ipsum, nec luctus nisl aliquam sollicitudin. Vestibulum sit amet orci sollicitudin, ornare urna sit amet, faucibus augue.",

        "contactEmail": "frank.harris@gmail.com",
        "contactPhone": "07590214171",

        "linkedinLink": "https://gb.linkedin.com/frank",
        "websiteLink": "website.com/frank",
        "photoLink": "photo.com/frank",
        "resumeLink": "resume.com/frank"
    },
    {
        "picURL": "https://onsemble.net/wp-content/themes/Onsemble-2015/images/icon-account.png",
        "name": "Ella Stefano",
        "title": "UX Designer",
        "location": "Cupertino, California",

        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim erat, lobortis at quam in, elementum consectetur libero. Sed lobortis, ante vitae ornare consequat, elit nisi tincidunt velit, nec lacinia urna elit quis libero.",
        "education": ["University of Oxford", "Applied Mathamatics", "Expected: First", "2013 - present"],
        "experience": ["Google Inc", "UX Designer", "2013 - present", "", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim erat, lobortis at quam in, elementum consectetur libero. Sed lobortis, ante vitae ornare consequat, elit nisi tincidunt velit, nec lacinia urna elit quis libero."],

        "coverLetter": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus ex et nisl egestas mollis et at dolor.Sed fringilla, arcu quis tincidunt efficitur, ante dui elementum purus, a consectetur nisi sem ac nibh. Curabitur ut leo id lectus aliquet hendrerit ac aliquam est. Mauris posuere interdum eros, vel sollicitudin justo pharetra quis. Vivamus interdum elit quam, a fermentum massa vehicula non. Quisque ac ultricies orci. Curabitur semper pellentesque sapien. Maecenas sed arcu eget felis vulputate mollis. Aenean congue lorem ipsum, nec luctus nisl aliquam sollicitudin. Vestibulum sit amet orci sollicitudin, ornare urna sit amet, faucibus augue.",

        "contactEmail": "ella.stefano@gmail.com",
        "contactPhone": "07590214171",

        "linkedinLink": "https://gb.linkedin.com/ella",
        "websiteLink": "website.com/ella",
        "photoLink": "photo.com/ella",
        "resumeLink": "resume.com/ella"
    }
]

$.ajax({
    type: 'GET',
    url: 'js/dashboard.json',
    success: function (response) {
        var candidateList = '';

        $.each(response, function (index, value) {
            candidateList += '<li class="candidate-li"><a><div class="candidate-pic"></div><div class="candidate-info"><p>' + value['name'] + '</p><p>' + value['title'] + '</p></div></a><p class="call-events" aria-hidden="false">34h</p></li>';
        });

        $('#dashboard #section1 .candidate-ul').append(candidateList);
    }
});

Answer 1 · 2016-06-16T15:20:57Z

June 16, 2016 3:20pm

James Moran It would definitely be better to store it in a variable. It only works with 'async' set to false, but you could store the data in a variable like so:

var myData;
$.ajax({
    'async': false,
    type: 'GET',
    url: 'js/dashboard.json',
    success: function (response) {
        myData = data;
        var candidateList = '';

        $.each(response, function (index, value) {
            candidateList += '<li class="candidate-li"><a><div class="candidate-pic"></div><div class="candidate-info"><p>' + value['name'] + '</p><p>' + value['title'] + '</p></div></a><p class="call-events" aria-hidden="false">34h</p></li>';
        });

        $('#dashboard #section1 .candidate-ul').append(candidateList);
    },
    error: function () {
        alert('No data');
    }
});

And then you could access it with dot notation.

Welcome to the Treehouse Community

Looking to learn something new?

James Moran

James Moran

Once loaded json data (using AJAX) into list, how to update the content when one of those list items are clicked?

1 Answer

Ryan Frizzell

Ryan Frizzell