Как выгрузить данные из JSON в локальный html?

Question

[Александр Лебедев]

Вечер добрый.

Есть json-файлик playback.json с вот такой структурой:

{
    "playing": true,
    "song": {
        "title": "Can't Get You out of My Head",
        "artist": "Jack Lukeman",
        "album": "Sunday Independent",
        "albumArt": "https://lh3.googleusercontent.com/q8vGPE-zyi0Kr6XzhHijz3-Nu0bPflB2wfSSJIfyIIxAYr8rouf8PWnni_LFMrp3tmHu1sCMVA"
    },
    "rating": {
        "liked": false,
        "disliked": false
    },
    "time": {
        "current": 101576,
        "total": 185000
    },
    "songLyrics": null,
    "shuffle": "NO_SHUFFLE",
    "repeat": "NO_REPEAT"
}

Мне нужно из него выгрузить в HTML-файл название/трек/обложку, чтобы потом из этого файлика подтягивать в трансляцию. Соответственно, нужно чтобы и содержимое файлика менялось при смене песни. Проблема в том, что я не совсем понимаю как это сделать, ибо мой вариант после пары часов мучений:

$(function(){
    $.getJSON('playback.json', function(data) {
            for(var i=0;i<data.song.length;i++){
                $('#song').append('<tr><td>' + data.song[i].title);
            }
    });
});

совершенно не работает. Буду благодарен любой помощи или готов оплатить как мелкий заказ :)

Comments

[Сергей delphinpro]

код в целом верный.
Что в консоли пишется? какие ошибки возникают?

Answer 1

[MetaDone]

Возможно, ваш исходный json отдается как строка в html, а не как объект json.
Попробуйте сделать так:
$.getJSON('playback.json', function(data) {
data = JSON.parse(data);
...

если станет норм - то проблема в этом

Comments

[Александр Лебедев]

Файл лежит в этой же папке, локально, обновляется внешним софтом. Это важно? :)

[MetaDone]

Александр Лебедев: вообще да. вот пример норм того, что должно выдаваться в заголовках ответа чтоб сразу все подхватилось:
Content-Type:application/json; charset=UTF-8
у Вас скорее всего выдается так:
Content-Type:text/html; charset=UTF-8
из-за этого и не получается. Проверяли с примером что я писал выше?

[Александр Лебедев]

Я нашел более простой пример, чтобы просто понять логику. Файл countries.json:

{
"Великобритания": 1,
"Китай": 2,
"Россия": 3,
"США": 4,
"Франция": 5
}

Файл HTML:

Выберите страну

Я даже JQUERY подтянул от греха, и вставил вашу строчку, но даже этот простой пример рабоать не хочет.

[MetaDone]

Александр Лебедев: вопрос - это у вас просто файлы в папке? они не отдаются веб-сервером? если да - то в этом причина - такие действия запрещены браузером. В консоль посмотрите, должен ругаться

[Александр Лебедев]

MetaDone: Вот. То есть, локально, без сервера, это организовать нельзя :) Основной вопрос отвечен :)

Answer 2

[Денис]

Работа с объектами несколько отличается от работы с массивами (массивоподобными объектами)

$(function() {
    $.getJSON('playback.json', function(data) {
        for (var key in data.song) {
            if (data.song.hasOwnProperty(key)) {
                $('#song').append('<tr><td>' + data.song[key]);
            }
        }
    });
});