JSON对象带有变量

Question

I need to create a JSON object "bio" which contains a lot of variables in it:

var bio = {
"name": "my name",
"role": "Web Developer",
"contacts":
    {
        "mobile": "my phone",
        "email": "my@email.address",
        "github": "https://github.com/",
        "twitter": "https://twitter.com/",
        "location": "Los Angeles, CA"
    },
"welcomeMessage": "Welcome to my online resume.",
"skills": ["HTML5","CSS3","JavaScript","Bootstrap", "Angular", "CoffeeScript", "W3"],
"biopic": "http://placehold.it/150x150",
"display": displayFunc(){

}

};

When I try to run this with:

var formattedName = HTMLheaderName.replace('%data%', bio.name);
var formattedRole = HTMLheaderRole.replace('%data%', bio.role);

$('#header').prepend(formattedRole);
$('#header').prepend(formattedName);

Nothing happens. I believe the error is somewhere in the "contacts" variable because if I comment out contacts and everything below it the name and role show up. But if I comment out welcomeMessage and everything below that I still get nothing.

EDIT: For this class the contact variable is required to be:

contacts : an object with
      mobile: string
      email: string 
      github: string
      twitter: string (optional)
      location: string

Answer 1

If you add function before displayFunc(){} then it should work (as @BubbleHacker mentioned)

Demo here: https://jsfiddle.net/mrLh3pz7/

var bio = {
"name": "my name",
"role": "Web Developer",
"contacts": [
    {
        "mobile": "my phone",
        "email": "my@email.address",
        "github": "https://github.com/",
        "twitter": "https://twitter.com/",
        "location": "Los Angeles, CA"
    }
],
"welcomeMessage": "Welcome to my online resume.",
"skills": ["HTML5","CSS3","JavaScript","Bootstrap", "Angular", "CoffeeScript", "W3"],
"biopic": "http://placehold.it/150x150",
"display": function displayFunc(){}
};