data.map 不是函数答案

【问题标题】：data.map is not a functiondata.map 不是函数
【发布时间】：2015-08-28 11:16:05
【问题描述】：

我正在为一个我无法解决的错误而苦恼。我有以下内容；

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": 部分。这就是让我失望的原因吗？

【问题讨论】：

请不要再打你的头了——我们会挺过去的……

标签： jquery json

【解决方案1】：

JavaScript 中的对象{} 没有.map() 方法。仅适用于Arrays、[]。

因此，为了让您的代码能够正常工作，请将 data.map() 更改为 data.products.map()，因为 products 是一个可以迭代的数组。

【讨论】：

iwow 它的工作原理，非常感谢我有同样的问题在数据之前有一行

【解决方案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 => {...});

Read here for details

【讨论】：

有时你可能在寻找值而不是键 > Object.values(someObject).map(function(item)... //而不是键
有时您可能会同时查找 Key 和 Values => Object.entries(someObject).forEach(([key, value]) => console.log(${key}: ${value}));跨度>

【解决方案3】：

在某些情况下（并非全部），最简单的答案是将“data”放在一对方括号中（即[data]) 将“数据”中的项目更改为数组：

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

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

     });

这里，[data]是一个数组，可以在上面使用".map"方法。 它对我有用！

或者通过以下方式将“数据”转换为数组：

     let dataArr = Array.from(data);

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

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

     });

但这里的问题是从“数据”中获取“产品”：

     data.products

“产品”是一个数组。

然后可以使用“.map”：

     data.products.map

【讨论】：

这不是简单地创建一个只有一个数据元素的新数组 - 您的原始对象吗？为什么需要映射它？ var data = {foo: 'bar'}; [data].map(function (item) { console.log(item); });
是的，它只是创建一个只有一个数据元素的新数组。没有什么不妥。不是我需要映射。这是需要映射的特定项目。如果它需要映射但您的数据不是数组，则会出现错误。将其转换为数组只会更改其格式，而不是其值，而这正是项目所需要的。
我可能遗漏了一些东西。在我看来，您的示例在没有地图的情况下也会做同样的事情：$.getJSON("json/products.json").done(function (data) { var allProducts = new getData(data); });
@WilliamHou 让我用一个比喻来解释这里的问题。 OP 有一个密码箱，他需要帮助才能打开，但只有一把无法使用的锤子。你建议他把锁箱放在一个木箱里，然后用锤子砸碎木箱，而不是给他钥匙。是的，他现在已经使用了锤子，但他仍然存在最初的问题——锁箱。
这是一个荒谬的解决方案，并且在问题的上下文中客观上不正确。答案是使用data.products.map，而不是将data 包装在一个数组中。您的回答导致整个data 对象被传递到getData，它显然期望data.products 中的一个元素作为其输入，而不是整个数据对象。当到达this.imageID = data.product_data.image_id; 之类的行时，您的回答将导致程序崩溃。即使不是这种情况，在数组中分层任意对象以使map 可用仍然是荒谬的。

【解决方案4】：

data 不是一个数组，它是一个包含产品数组的对象，所以迭代data.products

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

【讨论】：

【解决方案5】：

如果你想映射一个对象，你可以使用 Lodash。只需确保它是通过 NPM 或 Yarn 安装并导入即可。

使用 Lodash：

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】：

您始终可以执行以下操作：

const SomeCall = request.get(res => { 

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

费尔南多您好，欢迎来到 Stack Overflow！这是一个只有英文的网站。我已经编辑了您答案中不是以英文发布的部分。随意翻译并重新添加。

【解决方案9】：

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

        });

    });

您的代码中的错误是您在 AJAX 调用中创建了return，因此它只执行了一次。

【讨论】：