Ошибку синтаксиса JSON в консоли

131

27 апреля 2019, 22:40

Есть каталог товаров в JSON файле:

{
"11": {
    "name": "Green-Xtreame",
    "price": 250,
    "image" : "/image//tshirts.jpg"
},
"12": {
    "name": "Digital Owl",
    "price": 312,
    "image" : "/image//tshirt2.jpg"
},
"13": {
    "name": "I can",
    "price": 280,
    "image" : "/image//tshirt2.jpg"
},
"14": {
    "name": "Green-Xtreame",
    "price": 220,
    "image" : "/image//tshirts.jpg"
} 
}

Пытаюсь подключить его к JS И выводить данные по товарам (без jQuery):

function getJSONP(url, success) {
var ud = '_' + +new Date,
    script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0] 
           || document.documentElement;
window[ud] = function(data) {
    head.removeChild(script);
    success && success(data);
};
script.src = url.replace('callback=?', 'callback=' + ud);
head.appendChild(script);
}
getJSONP('file:///C:/Users/Task%203/work%20%E2%80/products.json', 
function(data){
var out = '';
    for (var key in data){
        out+='<div class="product">';
        out+='<h4>'+data[key]['name']+'</h4>';
        out+='<p> '+data[key]['price']+'</p>';
        out+='<img src="'+data[key].image+'">';
        out+='<button>Купить</button>';
        out+='</div>';
     getElementsById('products').html(out);
    }
 });

При проверке код не срабатывает, так как консоль выдает ошибку синтаксиса в json файле, хотя ошибок там нет. Подозреваю, что не удается распарсить json, как это можно решить?

Answer 1

Проблема в том, что таким образом нельзя загружать json.

При добавлении script, идет попытка выполнить загружаемый код, так как json - это не корректный js код, то при попытке его выполнить получается ошибка.

Решений может быть несколько:

использовать локальный сервер, и делать обычные ajax запросы

поменять содержимое так, чтобы оно соответствовало требованиям к запросам JSONP, а именно, чтобы в файле был js код, который можно выполнить. Однако в этом случае нужно будет менять и код, который загружает, так как сейчас имя callback генерируется динамически ('_' + +new Date). В итоге код может выглядеть так:

// main.js
function callbackAjson(data) {
    var out = '';
    for (var key in data) {
        out += '<div class="product">';
        out += '<h4>' + data[key]['name'] + '</h4>';
        out += '<p> ' + data[key]['price'] + '</p>';
        out += '<img src="' + data[key].image + '">';
        out += '<button>Купить</button>';
        out += '</div>';
        document.getElementById('products').innerHTML = out;
    }
}
function getJSONP(url, success) {
    script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0]
        || document.documentElement;
    script.src = url;
    head.appendChild(script);
}
getJSONP('a.json'); 
// a.json
callbackAjson({...}) // {...} - исходный Json

Кроме того, а обработчике сейчас допущены ряд ошибок, вроде опечатки в вызове getElementById, и попытке вызова у полученного элемента метода html, который остался от jQuery, вместо присваивания свойства innerHTML

Answer 2

Какую ошибку выдает консоль?

var text = `{ 
"11": { 
    "name": "Green-Xtreame", 
    "price": 250, 
    "image" : "/image//tshirts.jpg" 
}, 
 
"12": { 
    "name": "Digital Owl", 
    "price": 312, 
    "image" : "/image//tshirt2.jpg" 
}, 
 
"13": { 
    "name": "I can", 
    "price": 280, 
    "image" : "/image//tshirt2.jpg" 
}, 
 
"14": { 
    "name": "Green-Xtreame", 
    "price": 220, 
    "image" : "/image//tshirts.jpg" 
}  
}`; 
var data = JSON.parse(text); 
console.log(data);

Answer 3

Пробуй задать тип файла
script.type = "application/json";