data.map không phải là một hàm

Tôi đang vùi đầu vào một lỗi mà tôi không thể tìm ra cách khắc phục. Tôi có những thứ sau đây;

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"
        }
    }
]}

và jQuery sau

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);
    });
});

nhưng tôi gặp lỗi map.data không được xác định là một hàm? Nhìn vào nó, tôi không biết điều gì không hoạt động vì tôi đã sao chép nó vào một dự án mới từ mã đã sử dụng trước đó. Điều duy nhất khác biệt là nguồn JSON. Phần trước không có {"products":phần trước dấu ngoặc []. Đây có phải là những gì đang ném tôi đi?

Đối tượng, {}trong JavaScript không có phương thức .map(). Nó chỉ dành cho Mảng , [].

Vì vậy, để cho mã của bạn để thay đổi công việc data.map()để data.products.map()từ productslà một mảng mà bạn có thể lặp thuận.

Cách phù hợp để lặp lại các đối tượng là

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

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

Đọc ở đây để biết chi tiết

Các ĐƠN GIẢN NHẤT Câu trả lời là để đưa "dữ liệu" thành một cặp dấu ngoặc vuông (ví dụ [dữ liệu] ):

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

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

     });

Ở đây, [data] là một mảng và phương thức ".map" có thể được sử dụng trên đó. Nó hoạt động cho tôi!

data không phải là một mảng, nó là một đối tượng với một mảng các sản phẩm vì vậy hãy lặp lại data.products

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

Nếu bạn muốn ánh xạ một đối tượng, bạn có thể sử dụng Lodash. Chỉ cần đảm bảo rằng nó được cài đặt thông qua NPM hoặc Yarn và nhập nó.

Với Lodash:

Lodash cung cấp chức năng _.mapValuesánh xạ các giá trị và lưu giữ các khóa.

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

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

Bạn luôn có thể làm như sau:

const SomeCall = request.get(res => { 

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

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

this.$http.get('https://pokeapi.co/api/v2/pokemon')
.then(response => {
   if(response.status === 200)
   {
      this.usuarios = response.data.results.map(usuario => {
      return { name: usuario.name, url: usuario.url, captched: false } })
          }
    })
.catch( error => { console.log("Error al Cargar los Datos: " + error ) } )

dữ liệu cần phải là đối tượng Json, để làm như vậy, hãy đảm bảo những điều sau:

data = $.parseJSON(data);

Bây giờ bạn có thể làm điều gì đó như:

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

Tôi hy vọng điều này sẽ giúp một số người

Đã xảy ra lỗi khi $.map()gọi, hãy thử cách này:

    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]);
            };

        });

    }); 

Lỗi trong mã của bạn là do bạn đã thực hiện returntrong cuộc gọi AJAX của mình, vì vậy nó chỉ thực thi một lần.