Eclipse JSON format

Question

Я использую файл JSON для хранения массива атрибутов прямоугольника. Затем, в отдельном файле javascript, я разбираю JSON и рисую прямоугольники на холсте. По какой-то причине, Eclipse любит этот формат JSON и отладчик Chrome не принимает его:

rectangles = '[{"x" : 0, "y" : 0, "width" : 20, "height" : 10, "color" : "red"}, {"x" : 25, "y" : 0, "width" : 20, "height" : 10, "color" : "blue"}, {"x" : 0, "y" : 15, "width" : 20, "height" : 10, "color" : "blue"}, {"x" : 25, "y" : 15, "width" : 20, "height" : 10, "color" : "red"}]'; 

, но когда я очистить его и попытаться отформатировать его, Eclipse больше не рисует прямоугольники с этим форматом:

rectangles='[ 
    { 
    "x": 0, 
    "y": 0, 
    "width": 20, 
    "height": 10, 
    "color": "red" 
    }, 
    { 
    "x": 25, 
    "y": 0, 
    "width": 20, 
    "height": 10, 
    "color": "blue" 
    }, 
    { 
    "x": 0, 
    "y": 15, 
    "width": 20, 
    "height": 10, 
    "color": "blue" 
    }, 
    { 
    "x": 25, 
    "y": 15, 
    "width": 20, 
    "height": 10, 
    "color": "red" 
    } 
]'; 

Есть ли причина, по которой он рисует только прямоугольники с прежним форматом? Для справки, вот мой JavaScript:

function load(){ 
    var myData = JSON.parse(rectangles); 
    var can = document.getElementById('rectangleCanvas'); 
    var context = can.getContext('2d'); 

    for (i=0; i<myData.length; i++){ 
    context.fillStyle = myData[i].color; 
    context.fillRect(myData[i].x, myData[i].y, myData[i].width, myData[i].height); 
    } 
} 

Answer 1

Для конкретной проверки ошибок Tony's answer.

Кстати, из вашего фрагмента кажется странным, что вы объявляете его как String, а затем разбираете его позже.

Почему бы и нет?

rectangles = [ 
    { 
     "x": 0, 
     "y": 0, 
     "width": 20, 
     "height": 10, 
     "color": "red" 
    }, 
    { 
     "x": 25, 
     "y": 0, 
     "width": 20, 
     "height": 10, 
     "color": "blue" 
    }, 
    { 
     "x": 0, 
     "y": 15, 
     "width": 20, 
     "height": 10, 
     "color": "blue" 
    }, 
    { 
     "x": 25, 
     "y": 15, 
     "width": 20, 
     "height": 10, 
     "color": "red" 
    } 
]; 

function load(){ 

    var can = document.getElementById('rectangleCanvas'); 
    var context = can.getContext('2d'); 

    for (i=0; i<rectangles.length; i++){ 
     context.fillStyle = rectangles[i].color; 
     context.fillRect(rectangles[i].x, rectangles[i].y, rectangles[i].width, rectangles[i].height); 
    } 
} 

Answer 2

Если вы хотите строку продлить на несколько строк, вы должны закончить строку и добавьте:

var myLongString = 'This' + 
    'is' + 
    'my long string.'; 

Я шлепнулся своим «Начищенной» rectangles в jsfiddle и вы можете увидеть консоль зарегистрируйте ошибку:

SyntaxError: unterminated string literal