data.mapは関数ではありません


101

修正方法がわからないエラーに頭を悩ませています。私は以下を持っています。

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":[]括弧の前の部分を持っていませんでした。これは私を失望させているものですか?


64
もう頭をバッシュしないでください-これを乗り越えます...
マークC.

map.dataまたはdata.map?
depperm

回答:


172

{}JavaScriptのオブジェクトにはメソッドがありません.map()。これは配列、のみです[]

したがって、コードが機能data.map()するdata.products.map()ためにproductsは、反復可能な配列がからに変更されます。


iwowうまくいきました。データの前に行があったのと同じ問題が多かったのでありがとう
Anoop PS

61

オブジェクトを反復処理する正しい方法は

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

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

詳細はこちら


10
キーではなく値を探す場合もあります> Object.values(someObject).map(function(item)... //キーの代わりに
Ram

5

最も単純な答えは、"data"を一対の角括弧(つまり[data])に入れることです:

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

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

     });

ここで、[data]は配列であり、「。map」メソッドを使用できます。わたしにはできる! ここに画像の説明を入力してください



1

オブジェクトをマップする場合は、Lodashを使用できます。NPMまたはYarn経由でインストールされていることを確認してインポートしてください。

Lodashの場合:

Lodashは_.mapValues、値をマップし、キーを保持する機能を提供します。

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

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


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

こんにちは、フェルナンド、そしてスタックオーバーフローへようこそ!これは英語のみのサイトです。英語で投稿されなかった回答の一部を編集しました。翻訳して再度追加してください。
ピカクジラの魔法使い

0

データはJsonオブジェクトである必要があります。そのためには、次のことを確認してください。

data = $.parseJSON(data);

今、あなたは次のようなことをすることができます:

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

これが誰かを助けることを願っています


-1

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

        });

    }); 

コードのエラーは、returnAJAX呼び出しで行ったため、1回しか実行されませんでした。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.