Data.map не является функцией

Я топчу свою голову от ошибки, которую я не могу решить, как исправить. У меня есть следующее:

JSON

{"products":
[
    {
        "product_id" : "123",
        "product_data" : {
            "image_id" : "1234",
            "text" : "foo",
            "link" : "bar",
            "image_url" : "baz"
        }
    },{
        "product_id" : "456",
        "product_data" : {
            "image_id" : "1234",
            "text" : "foo",
            "link" : "bar",
            "image_url" : "baz"
        }
    }
]}

и следующий jQuery

function getData(data) {
    this.productID = data.product_id;
    this.productData = data.product_data;
    this.imageID = data.product_data.image_id;
    this.text = data.product_data.text;
    this.link = data.product_data.link;
    this.imageUrl = data.product_data.image_url;
}

$.getJSON("json/products.json").done(function (data) {

    var allProducts = data.map(function (item) {
        return new getData(item);
    });
});

но я получаю сообщение об ошибке, что map.data undefined как функция? Глядя на это, я не знаю, что не работает, поскольку я скопировал это в новый проект из ранее использованного кода. Единственное отличие - это источник json. У предыдущего не было { "products": part перед [] скобками. Это то, что меня выбрасывает?

Ответ 1

Объекты, {}, в JavaScript не имеет метода .map(), он только для массивов, [].

Итак, чтобы ваш код работал, измените data.map() на data.products.map(), так как products - это массив, который вы можете выполнять итерацией.

Ответ 2

Правильный способ перебирать объекты

Object.keys(someObject).map(function(item)...
Object.keys(someObject).forEach(function(item)...;

// ES way
Object.keys(data).map(item => {...});
Object.keys(data).forEach(item => {...});

Читайте здесь для деталей

Ответ 3

data не является массивом, это объект с массивом продуктов, поэтому итерации по data.products

var allProducts = data.products.map(function (item) {
    return new getData(item);
});

Ответ 4

Вы всегда можете сделать следующее:

const SomeCall = request.get(res => { 

const Store = []; 
Store.push(res.data);

Store.forEach(item => { DoSomethingNeat 
});
});

Ответ 5

Если вы хотите отобразить объект, вы можете использовать Lodash. Просто убедитесь, что он установлен через NPM или Yarn и импортируйте его.

С Лодашем:

Lodash предоставляет функцию _.mapValues для отображения значений и сохранения ключей.

_.mapValues({ one: 1, two: 2, three: 3 }, function (v) { return v * 3; });

// => { one: 3, two: 6, three: 9 }

Ответ 6

данные должны быть объектами Json, для этого убедитесь, что:

data = $.parseJSON(data);

Теперь вы можете сделать что-то вроде:

data.map(function (...) {...});

Я надеюсь, что это поможет кому-то

Ответ 7

Ошибка при вызове $.map(), попробуйте следующее:

    function getData(data) {
        this.productID = data.product_id;
        this.productData = data.product_data;
        this.imageID = data.product_data.image_id;
        this.text = data.product_data.text;
        this.link = data.product_data.link;
        this.imageUrl = data.product_data.image_url;
    }

    $.getJSON("json.json?sdfsdfg").done(function (data) {

        var allPosts = $.map(data,function (item) {

            for (var i = 0; i < item.length; i++) {
                new getData(item[i]);
            };

        });

    });

Ошибка вашего кода заключалась в том, что вы сделали return в своем вызове AJAX, поэтому он выполнялся только один раз.