data.map n'est pas une fonction

Je me critique contre une erreur que je n'arrive pas à résoudre J'ai ce qui suit;

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

et le jQuery suivant

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

Pourtant, j'obtiens une erreur indiquant que map.data n'est pas défini en tant que fonction? En le regardant, je ne sais pas ce qui ne fonctionne pas car j'ai copié ceci dans un nouveau projet à partir de code précédemment utilisé. La seule chose différente est la source JSON. Le précédent n'avait pas la {"products":partie avant les crochets []. Est-ce cela qui me dérange?

Les objets, {}en JavaScript, n'ont pas la méthode .map(). Il est seulement pour des tableaux , [].

Donc, pour que votre code fonctionne, changez data.map()en data.products.map()puisque productsest un tableau sur lequel vous pouvez itérer.

La bonne façon d'itérer sur les objets est

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

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

Lisez ici pour plus de détails

La réponse la PLUS SIMPLE est de mettre «données» entre crochets (c'est-à-dire [données] ):

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

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

     });

Ici, [data] est un tableau, et la méthode ".map" peut être utilisée dessus. Ça marche pour moi!

data n'est pas un tableau, c'est un objet avec un tableau de produits donc itérer sur data.products

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

Si vous souhaitez mapper un objet, vous pouvez utiliser Lodash. Assurez-vous simplement qu'il est installé via NPM ou Yarn et importez-le.

Avec Lodash:

Lodash fournit une fonction _.mapValuespour mapper les valeurs et conserver les clés.

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

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

Vous pouvez toujours effectuer les opérations suivantes:

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

les données doivent être des objets Json, pour ce faire, assurez-vous que les éléments suivants:

data = $.parseJSON(data);

Vous pouvez maintenant faire quelque chose comme:

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

J'espère que cela aidera quelqu'un

Il y a une erreur lors de l' $.map()invocation, essayez ceci:

    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'erreur dans votre code était que vous avez fait returndans votre appel AJAX, donc il ne s'est exécuté qu'une seule fois.