Проблема передачи объекта JSON в функцию

Question

Я только изучаю javascript, так что я представляю, что это относительно просто, но это уже давно меня раздражает.

У меня есть функция, которая просто отображает некоторый текст, который я вызываю из ответа AJAX,Вот мой код.

if(this.responseText != null)
{
    var text = "<ul>";
    var object = eval("(" + this.responseText + ")");
    var track;
    for (var i = 0; i < object.length; i++)
    {
        track = object[i];
        text += "<li><img src=\"" + track.artwork_url + "\"/>";
        text += track.title;
        text += "<ul><li><a href=\"#\" onclick=\"playTrack(" + track + ");return false;\">Play</a></li>"
        text += "<li><a href=\"" + track.download_url + "?client_id=" + clientId + "\">Download</a></li></ul>"

        text += "</li>";
    }


    text += "</ul>";

    document.getElementById("content").innerHTML = text;
}

function playTrack(track)
{
     document.getElementById("content").innerHTML = "This has worked";
}

Мне не нравится передавать объект track в функцию playTrack (пока простая функция, которая просто отображает некоторый текст).Я получаю сообщение об ошибке «Uncaught SyntaxError: неожиданный идентификатор»

Если я передаю track.id (или любое другое свойство), все работает нормально, чего я не понимаю.

Спасибо залюбая помощь,

Мистер Б.

Answer 1

Вы не можете передать объект, подобный этому. track преобразуется в строку, а затем ваш playTrack вызов функции завершается неудачно, поскольку синтаксис неверен. Он будет визуализирован (что-то вроде onclick=playTrack([Object object]), что явно не является допустимым JavaScript). Что плохого в том, чтобы просто передать track.id, поскольку вы знаете, что это работает?

Answer 2

@alpian и @Jim верны, вам нужно преобразовать объект в строку json, вы можете использовать http://www.json.org/js.html для этого.

...    
text += "<ul><li><a href=\"#\" onclick=\"playTrack('" + JSON.stringify(track) + "');return false;\">Play</a></li>"
...

Answer 3

Я бы настоятельно рекомендовал использовать JSON.parse() вместо eval.Вместо того, чтобы создавать записи списка в виде текста, я бы сделал их объектами DOM с document.createElement() и добавил бы обработчики кликов как addEventListener, чтобы у вас не было необходимости пытаться включать ваши объекты JS в виде текста вHTML поток.

Answer 4

При создании события onclick "playTrack" вы используете неверную переменную track. «track» - это объект, и его использование в качестве строки будет [Object object]. Таким образом, в вашем "html" у вас будет что-то вроде onclick = "playtrack ([Object object])", и это синтаксически неверно.