Как в js считать данные из файла txt указанного ссылкой в json?

Question

[Максим Кукушкин]

Здравствуйте! Пытаюсь сделать небольшой интернет-магазин на js и jquery и json.

Json файл представляет из себя простой каталог файлов. Js файл читает его и выводит данные в html.
Проблема в том, что описания товаров очень большие - по нескольку абзацев, вставлять их просто в json неудобно.
Я решил в json для ключа description использовать ссылку на текстовый файл с описанием данного товара.
Но я не знаю как сделать в js обработку этого файла .txt и вывести данные на страничку. Помогите, пожалуйста!

Вот код:

goods.json

{
  "11292" : {
    "name" : "Яблоки",
    "cost" : 12,
    "description" : "texts/11292.txt",
    "image" : "images/apple.png"
  },
  "11294" : {
    "name" : "Лимоны",
    "cost" : 16,
    "description" : "texts/11294.txt",
    "image" : "images/lemon.png"
  },
  "11295" : {
    "name" : "Клубника",
    "cost" : 22,
    "description" : "texts/11295.txt",
    "image" : "images/strawberry.png"
  }
}

eshop.js

function loadGoods() {
    //загружаю товары на страницу
    $.getJSON('goods.json', function (data) {
        //console.log(data);
        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<p>Описание: '+data[key].description+'</p>'; //вот здесь нужно обработать файл txt, но как это сделать?
            out+='<img src="'+data[key].image+'">';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
        $('#goods').html(out);
    });
}

Answer 1

[mt. NATS]

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

Comments

[Максим Кукушкин]

Спасибо большое! Пришлось немного подпилить, и всё заработало)
Было бы ещё неплохо разобраться, как это работает)

[mt. NATS]

Максим Кукушкин, тыц

XMLHttpRequest - создаешь запрос
open - указываешь параметры
onreadystatechange - обработка ответа
send - отправка запроса
readyState - ответ получен
responseText - то что прочитали из файла

список состояний readyState такой:
0 — Unitialized
1 — Loading
2 — Loaded
3 — Interactive
4 — Complete

все просто )

[Максим Кукушкин]

mt. NATS, Спасибо, прочитал, понял. Только хотелось бы делать этот запрос асинхронно, чтобы страничка грузилась быстрее, но, когда меняю третий аргумент с false на true, у меня текст описания, загружаемый из доп. файлов, просто не отображается, а все остальные параметры остаются. Можно ли это как-то изменить, чтобы оптимизировать сайт?

[mt. NATS]

Максим Кукушкин, можно, но многопоток сама по себе не самая простая задача. Я думаю пока сходу у тебя не получится это сделать. Попробуй начать с БД она тоже может хранить json, но лучше раскидать по ячейкам, а результат если очень хочется можно преобразовать в json и прикрутить к уже готовому куску вывода на экран....

[Максим Кукушкин]

mt. NATS, Было бы хорошо. Да вот только я мучаюсь, не знаю, как мне запихнуть в бд по ячейкам готовый json файл, а то данных там уже многого, вручную вбивать - не вариант.
Кроме того, появились новые ключи: категории (список) и объект "носитель" - "цена". БД, как я понял, вообще массивы не хранит, так что придется ещё и кучу таблиц создавать. Если честно, не понимаю, зачем нужна БД, если количество товаров не превысит сотню. Только лишняя морока получается.. или я что-то неправильно понимаю?