Проблема с многослойным массивом с объектами в JSON

-2

Я создал многоуровневый массив с объектами в формате JSON, чтобы пользователь мог менять фоновые изображения для пользовательского создания символа. Вот основной сценарий:Проблема с многослойным массивом с объектами в JSON

var newHead; 
var newBody; 
var newArm; 

var masterList = [ 
    { 
    {"creatureName":"Snowman"}, 
    {"part": 
     [ 
     {"partName":"head", "urlLocation": "'snowman/head.png'"}, 
     {"partName":"body", "urlLocation": "'snowman/body.png'"}, 
     {"partName":"arms", "urlLocation": "'snowman/arm.png'"} 
     ] 
    } 
    }, 
    { 
    {"creatureName":"Robot"}, 
    {"part": 
     [ 
     {"partName":"head", "urlLocation": "'robot/head.png'"}, 
     {"partName":"body", "urlLocation": "'robot/body.png'"}, 
     {"partName":"arms", "urlLocation": "'robot/arm.png'"} 
     ] 
    } 
    }, 
    { 
    {"creatureName":"Alien"}, 
    {"part": 
     [ 
     {"partName":"head", "urlLocation": "'alien/head.png'"}, 
     {"partName":"body", "urlLocation": "'alien/body.png'"}, 
     {"partName":"arms", "urlLocation": "'alien/arm.png'"} 
     ] 
    } 
    } 
]; 

$(window).ready(matchHeight); 
$(window).resize(matchHeight); 

function matchHeight() 
{ 
    var div = $('#charImg'); 
    var width = div.width(); 

    div.css('height', width); 
} 

function createOptions(x) { 

} 

function changeHead(x) { 
    newHead = masterList[x].part[0].urlLocation; 
    $('#charImg').css("background","url('')"); 
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")"); 
    $('#charImg').css("background-position","center center"); 
    $('#charImg').css("background-repeat","no-repeat"); 
    $('#charImg').css("background-size","100%","100%"); 
} 

function changeBody(x) { 
    newBody = masterList[x].part[1].urlLocation; 
    $('#charImg').css("background","url('')"); 
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")"); 
    $('#charImg').css("background-position","center center"); 
    $('#charImg').css("background-repeat","no-repeat"); 
    $('#charImg').css("background-size","100%","100%"); 
} 

function changeArm(x) { 
    newArm = masterList[x].part[2].urlLocation; 
    $('#charImg').css("background","url('')"); 
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")"); 
    $('#charImg').css("background-position","center center"); 
    $('#charImg').css("background-repeat","no-repeat"); 
    $('#charImg').css("background-size","100%","100%"); 
} 

function randomize() { 
    alert (masterList.length); 
    newArm = armChoice[x].urlLocation; 
    $('#charImg').css("background","url('')"); 
    $('#charImg').css("background","url("+newHead+"),url("+newBody+"),url("+newArm+")"); 
    $('#charImg').css("background-position","center center"); 
    $('#charImg').css("background-repeat","no-repeat"); 
    $('#charImg').css("background-size","100%","100%"); 
} 

$(document).ready(function(){ 
    newHead = masterList[0].part[0].urlLocation; 
    newBody = masterList[0].part[1].urlLocation; 
    newArm = masterList[0].part[2].urlLocation; 
});

Вот HTML-файл:

<html> 

<head> 
<title>Character Creation</title> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="mainScript.js"></script> 
</head> 

<body> 
<h1>Avatar Creation</h1> 
<div id="charImg"></div> 
<div id="choiceBoxOverall"> 
<h2>Customize your character</h2> 
<h3>Head</h3> 
<span class="choiceBox" onclick="changeHead (0)">Snowman</span> 
<span class="choiceBox" onclick="changeHead (1)">Robot</span> 
<span class="choiceBox" onclick="changeHead (2)">Alien</span> 
<h3>Body and Legs</h3> 
<span class="choiceBox" onclick="changeBody (0)">Snowman</span> 
<span class="choiceBox" onclick="changeBody (1)">Robot</span> 
<span class="choiceBox" onclick="changeBody (2)">Alien</span> 
<h3>Arms</h3> 
<span class="choiceBox" onclick="changeArm (0)">Snowman</span> 
<span class="choiceBox" onclick="changeArm (1)">Robot</span> 
<span class="choiceBox" onclick="changeArm (2)">Alien</span> 
</div> 

<span id="randomBox" onclick="randomize()">Randomize</span> 

</body> 

</html>

Что я делаю неправильно?

Спасибо! supra411

источник

2014-12-29 supra411

Неверный синтаксис Javascript. '{}' для объектов, все внутри него должно быть 'ключ: значение'. У вас не может быть '{{'. – Barmar

Ваш синтаксис объекта неправильный. Вы не обертываете { ... } вокруг каждого элемента объекта.

var masterList = [ 
    {"creatureName":"Snowman", 
    "part": [ 
     {"partName":"head", "urlLocation": "'snowman/head.png'"}, 
     {"partName":"body", "urlLocation": "'snowman/body.png'"}, 
     {"partName":"arms", "urlLocation": "'snowman/arm.png'"} 
    ] 
    }, 
    {"creatureName":"Robot", 
    "part": [ 
     {"partName":"head", "urlLocation": "'robot/head.png'"}, 
     {"partName":"body", "urlLocation": "'robot/body.png'"}, 
     {"partName":"arms", "urlLocation": "'robot/arm.png'"} 
    ] 
    }, 
    {"creatureName":"Alien", 
    "part": [ 
     {"partName":"head", "urlLocation": "'alien/head.png'"}, 
     {"partName":"body", "urlLocation": "'alien/body.png'"}, 
     {"partName":"arms", "urlLocation": "'alien/arm.png'"} 
    ] 
    } 
];

источник

2014-12-29 10:09:34 Barmar

Проблема с многослойным массивом с объектами в JSON

ответ

Смежные вопросы