It has always been painful to update the publications in my website. It takes lots of time/efforts especially when you want to try another citation style. Today I spent some time developing a short javascript code to automatically display the publications stored in a JSON file, which might help solving the problem.

JSON is a popular format for exchanging data. JSON is very simple and light-weight, but the key-value pairs and arrays already provides capability to describe complex real world objects. Although bibtex is more commonly used in academic writings due to its integration in Latex, I chose JSON because the JSON format is better supported in programming languages. Almost all standard libraries of major programming languages directly provides support for JSON parsing, while parsing bibtex typically requires 3rd party libraries.

Loading external JSON into webpage is more complex than I thought. In pure javascript reading JSON data requires XMLHttp. This can be simplified by using jQuery. Also in this case jQuery provides more powerful tools for HTML manipulation.

My final implementation is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$.getJSON( "data/publications.json", function( data ) {
    $.each(data,function(paperID) {
        var str = "";
        var paper = data[paperID];

        // Author List
        var author = paper["author"];
        var authorNum = author.length;
        $.each(author,function(authorID){
            if (author[authorID]=="Yeguang Xue"){
                str += '<b>' + author[authorID] + '</b>';
            }
            else{
                str += author[authorID];
            }
            if (authorID == authorNum-2){
                str += ' and ';
            }   else {
                str += ', ';
            }
        })
        // Title, Journal
        str += '"' + paper["title"] + '."';
        str += ' <i>' + paper["journal"] + '</i>';
        // Volume, Page or In press
        if (paper.hasOwnProperty("inpress")) {
            str += ", in press,";
            str += ' ' + paper["year"] + '.';
        } else{
            str += ' ' + paper["volume"] + ', ';
            str += paper["pages"][0].toString() + '-' + paper["pages"][1].toString();
            str += ' (' + paper["year"] + ').';
        }
        // Links
        if (paper.hasOwnProperty("doi")) {
            str += ' [<a href=' + 'http://dx.doi.org/' + paper["doi"] + '>DOI</a>] ';
        }
        if (paper.hasOwnProperty("link-pdf")) {
            str += ' [<a href=' + paper["link-pdf"] + '>PDF</a>] ';
        }
        // Add to HTML
        $("ol#publications-list").prepend('<li>'+str+'</li>');
    });
});

The corresponding JSON data file is like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[
    {
        "type": "article",
        "author": ["Yeguang Xue", "Yihui Zhang", "Xue Feng", "Seok Kim", "John A Rogers", "Yonggang Huang"],
        "year": 2015,
        "title": "A theoretical model of reversible adhesion in shape memory surface relief structures and its application in transfer printing",
        "journal": "Journal of the Mechanics and Physics of Solids",
        "volume": 77,
        "pages": [27,42],
        "doi": "10.1016/j.jmps.2015.01.001",
        "link-pdf": "http://rogers.matse.illinois.edu/files/2015/jmpssmp.pdf"
    },
    {
        "type": "article",
        "author": ["Yihui Zhang", "Richard Chad Webb", "Hongying Luo", "Yeguang Xue", "Jonas Kurniawan", "Nam Heon Cho", "Siddharth Krishnan", "Yuhang Li", "John A Rogers", "Yonggang Huang"],
        "year": 2016,
        "title": "Theoretical and Experimental Studies of Epidermal Heat Flux Sensors for Measurements of Core Body Temperature",
        "journal": "Advanced Healthcare Materials",
        "volume": 5,
        "pages": [119,127],
        "doi": "10.1002/adhm.201500110",
        "link-pdf": "http://rogers.matse.illinois.edu/files/2016/ahmheatflux.pdf"
    },
    {
        "type": "article",
        "author": ["Yinji Ma", "Kyung‐In Jang", "Liang Wang", "Han Na Jung", "Jean Won Kwak", "Yeguang Xue", "Hang Chen", "Yiyuan Yang", "Dawei Shi", "Xue Feng", "John A Rogers", "Yonggang Huang"],
        "year": 2016,
        "title": "Design of Strain‐Limiting Substrate Materials for Stretchable and Flexible Electronics",
        "journal": "Advanced Functional Materials",
        "volume": 0,
        "pages": [0,0],
        "doi": "10.1002/adfm.201600713",
        "inpress": true
    }
]

In more advanced web development, JSON+AJAX makes it possible to update part of the page without reloading. If my understanding is correct, here is an example of application of AJAX for publication list:

I have an extremely long list of publications and it’s inappropriate to load them all. So I will develop a page so that the visitor can submit requests to the server for a subset of my publications (publications from a certain year). In AJAX way the server will send back a JSON file to the the page can update the display of publication list without reloading.

I guess I won’t bother to do that at least for now since the more urgent task is to get an extremely long list of publications. XD