data.map ist keine Funktion

Ich schlage meinen Kopf gegen einen Fehler, den ich nicht beheben kann. Ich habe folgendes;

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

und die folgende 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);
    });
});

Ich erhalte dennoch die Fehlermeldung, dass map.data als Funktion undefiniert ist. Wenn ich es mir anschaue, weiß ich nicht, was nicht funktioniert, da ich dies aus zuvor verwendetem Code in ein neues Projekt kopiert habe. Das einzige, was anders ist, ist die JSON-Quelle. Der vorherige hatte das {"products":Teil nicht vor den [] Klammern. Ist es das, was mich abschreckt?

Objekte {}in JavaScript haben die Methode nicht .map(). Es ist nur für Arrays , [].

Damit Ihr Code funktioniert, ändern Sie sich data.map()in, data.products.map()da productses sich um ein Array handelt, auf dem Sie iterieren können.

Der richtige Weg, um Objekte zu durchlaufen, ist

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

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

Lesen Sie hier für Details

Die einfachste Antwort ist, "Daten" zu setzen in ein Paar eckiger Klammern (dh [Daten] ) zu setzen:

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

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

     });

Hier ist [data] ein Array, auf dem die ".map" -Methode verwendet werden kann. Für mich geht das!

data ist kein Array, sondern ein Objekt mit einem Array von Produkten data.products

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

Wenn Sie ein Objekt zuordnen möchten, können Sie Lodash verwenden. Stellen Sie einfach sicher, dass es über NPM oder Garn installiert ist, und importieren Sie es.

Mit Lodash:

Lodash bietet eine Funktion _.mapValueszum Zuordnen der Werte und zum Beibehalten der Schlüssel.

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

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

Sie können immer Folgendes tun:

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

Die Daten müssen Json-Objekte sein. Stellen Sie dazu Folgendes sicher:

data = $.parseJSON(data);

Jetzt können Sie so etwas tun wie:

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

Ich hoffe das hilft jemandem

Beim $.map()Aufrufen ist ein Fehler aufgetreten. Versuchen Sie Folgendes:

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

        });

    }); 

Der Fehler in Ihrem Code war, dass Sie ihn returnin Ihrem AJAX-Aufruf gemacht haben, sodass er nur einmal ausgeführt wurde.