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 ไม่ได้กำหนดเป็นฟังก์ชัน? มองไปที่ฉันไม่รู้ว่าอะไรใช้ไม่ได้เพราะฉันคัดลอกไปยังโครงการใหม่จากรหัสที่ใช้ก่อนหน้านี้ สิ่งเดียวที่แตกต่างคือซอร์ส JSON อันก่อนหน้านี้ไม่มี{"products":ส่วนก่อนเครื่องหมายวงเล็บ [] นี่คือสิ่งที่ทำให้ฉันผิดหวัง?

วัตถุ{}ใน JavaScript .map()ไม่ได้มีวิธีการ มันเป็นเพียงสำหรับArrays[] ,

ดังนั้นเพื่อให้โค้ดของคุณทำงานได้เปลี่ยนdata.map()เป็นdata.products.map()ตั้งแต่productsคืออาร์เรย์ที่คุณสามารถทำซ้ำได้

วิธีที่ถูกต้องในการวนซ้ำวัตถุคือ

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

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

อ่านรายละเอียดได้ที่นี่

ง่ายที่สุดคำตอบคือการใส่"ข้อมูล"เป็นคู่ของวงเล็บ (เช่น[ข้อมูล] ):

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

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

     });

ที่นี่[data]คืออาร์เรย์และสามารถใช้เมธอด".map"ได้ ได้ผลสำหรับฉัน!

data ไม่ใช่อาร์เรย์เป็นวัตถุที่มีอาร์เรย์ของผลิตภัณฑ์ดังนั้นจึงวนซ้ำ data.products

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

หากคุณต้องการแมปวัตถุคุณสามารถใช้ Lodash ตรวจสอบให้แน่ใจว่าได้ติดตั้งผ่าน NPM หรือ Yarn แล้วนำเข้า

ด้วย Lodash:

Lodash มีฟังก์ชัน_.mapValuesในการแมปค่าและเก็บรักษาคีย์

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

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

คุณสามารถทำสิ่งต่อไปนี้ได้ตลอดเวลา:

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

ข้อมูลจำเป็นต้องเป็นวัตถุ Json ในการดำเนินการดังกล่าวโปรดตรวจสอบสิ่งต่อไปนี้:

data = $.parseJSON(data);

ตอนนี้คุณสามารถทำสิ่งต่างๆเช่น:

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

ฉันหวังว่านี่จะช่วยได้บ้าง

มีข้อผิดพลาดใน$.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 ดังนั้นจึงทำงานเพียงครั้งเดียว