метод объекта с вызовом Ajax с ошибками, и почему так

362
18 мая 2018, 10:10

Подскажите пожалуйста, почему происходит такое поведение кода. Я только учусь и насколько я понял, создавать классы от одно родительского класса это норма. Пытаюсь сделать класс наследник ImageList, c методом, который берет данные из вот этого config.json по сути это src и href для будущего img обернутого в ссылку.

{
    "min": "/images/small/image1.jpg",
    "max": "/images/big/image1.jpg"
}

На выходе планирую получить вот это:

<li><a href="/images/big/image1.jpg"><img src="/images/small/image1.jpg" alt="image2"></a></li>

Извиняюсь за избыток кода, но вот исходник:

//1.Класс Conrainer
var Container = function (id, className, html) {
    this.id = id || '';
    this.className = className || '';
};
Container.prototype.show = function () {
    document.write(this.render());
};
Container.prototype.remove = function () {
    document.getElementById(this.id).remove()
}; 
//_______________________________________________________
//2.Класс Меню
var Menu = function (id, className, items) {
    Container.call(this, id, className,items);
    this.items = items;
};
Menu.prototype = Object.create(Container.prototype);
Menu.prototype.constructor = Menu;
Menu.prototype.render = function () {
    var result = '<ul id="' + this.id + '"class="' + this.className + '">';
    for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].render();
    }
    result += '</ul>';
    return result;
    console.log(result);
};
//________________________________________________
//3.Класс ImageList наследник класса MenuItem
var ImageList = function (id, name) {
    Container.call(this);
    this.id = id;
    this.name = name;
    //атрибуты которые присвоим после загрузки config.json
    this.init();
    this.load();
    this.href= '';
    this.src = '';
};
ImageList.prototype = Object.create(Container.prototype);
ImageList.prototype.constructor = ImageList;
//________Метод init__________
ImageList.prototype.init = function () {
    this.xhr = false;
    if (window.XMLHttpRequest) {
        this.xhr = new XMLHttpRequest();
    }
    if (!this.xhr) {
        alert('Не удалось создать запрос');
    }
    this.xhr = new XMLHttpRequest();
    this.xhr.onreadystatechange = this.loadImagePath.bind(this);
}
ImageList.prototype.load = function () {
    var url = 'http://localhost:8888/config.json';
    this.xhr.open('GET', url, true);
    this.xhr.send();
}
//метод для загрузки json конфига
ImageList.prototype.loadImagePath = function () {
    if (this.xhr.readyState == 4) {
        if (this.xhr.status == 200) {
            var data = JSON.parse(this.xhr.responseText);
            this.href = data.max;
            this.src = data.min;
            console.log('success');
        }
    } else {
        console.log('error');
    }
}
//собственный метод render
ImageList.prototype.render = function () {
   result = '<li><a href="'+this.href+'"><img src="'+this.src+'" alt="' + this.name + '"></a></li>';
    console.log(result);
    return result;
}
//__________________________________________________
//Создаем конфиг
var items = [
            new ImageList('1', 'image1'),
            new ImageList('2', 'image2')
        ];
//____________________________________________________
//Вывод на экран
var menu = new Menu('menu_id', 'menu_class', items);
menu.show();
var list1 = new ImageList('1','image1');
//list1.show();

Логика такая, есть класс ImageList, у него свойства href и src, методом init в этом классе создаю метод xhr(не знаю правильно ли так говорить), далее вызываю метод load для получения данных из config.json и записываю их в свойства this.src и this.href. В конце я создаю в массиве два новых экземпляра ImageList и передаю в класс Menu для записи в DOM методом show(); Все выводится, но вместо src и href у новых экземпляров ImageList свойства this.src и this.href - undefined; Если я просто в консоли после загрузки страницы создаю экземпляр руками, вот так:

var list1 = new ImageList('2','image2');
console.log(list1);
<li><a href="/images/big/image1.jpg"><img src="/images/small/image1.jpg" alt="image2"></a></li>

То в таком случае свойства this.href и this.src заполнены верно, почему так происходит? Добавил в метод loadImagePath() обработку ошибки, что бы в консоль выводил, в итоге выводит 1success 2error. В общем что я делаю не так?

READ ALSO
Подсчитать сумму заказа исходя из цены и количества в каждом поле

Подсчитать сумму заказа исходя из цены и количества в каждом поле

Уважаемые знатоки, помогите пожалуйста разобратьсяБьюсь уже пол дня, не могу добиться чтобы при увеличении количества в поле input автоматически...

264
Парсер контента

Парсер контента

Пытаюсь спарсить этот сайт этот часть:

244
JavaScript, заполнение многомерного массива

JavaScript, заполнение многомерного массива

У меня есть массив такого вида:

264