Estou batendo minha cabeça contra um erro que não consigo descobrir como consertar. Eu tenho o seguinte;
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"
}
}
]}
e o seguinte 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);
});
});
ainda estou recebendo um erro que map.data é indefinido como uma função? Olhando para ele, não sei o que não está funcionando, pois copiei isso para um novo projeto de um código usado anteriormente. A única coisa diferente é a fonte JSON. O anterior não tinha a {"products":
parte antes dos colchetes []. É isso que está me confundindo?
Respostas:
Objetos,
{}
em JavaScript não possuem o método.map()
. É só para Arrays ,[]
.Portanto, para que seu código funcione, mude
data.map()
para,data.products.map()
poisproducts
é um array sobre o qual você pode iterar.fonte
A maneira certa de iterar sobre os objetos é
Leia aqui para detalhes
fonte
O MAIS SIMPLES resposta é colocar "dados" em um par de colchetes (isto é, [dados] ):
Aqui, [data] é uma matriz e o método ".map" pode ser usado nela. Funciona para mim!
fonte
data
não é uma matriz, é um objeto com uma série de produtos, para iterardata.products
fonte
Se você deseja mapear um objeto, você pode usar Lodash. Apenas certifique-se de que ele está instalado via NPM ou Yarn e importe-o.
Com Lodash:
Lodash fornece uma função
_.mapValues
para mapear os valores e preservar as chaves.fonte
Você sempre pode fazer o seguinte:
fonte
fonte
os dados precisam ser objeto Json, para fazer isso, certifique-se do seguinte:
Agora você pode fazer algo como:
Espero que isso ajude alguém
fonte
Ocorreu um erro na
$.map()
invocação, tente o seguinte:O erro em seu código foi cometido
return
em sua chamada AJAX, então ela foi executada apenas uma vez.fonte