Walę się w głowę o błąd, którego nie potrafię naprawić. Mam następujące;
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"
}
}
]}
i następujące 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);
});
});
jeszcze otrzymuję błąd, że map.data jest niezdefiniowana jako funkcja? Patrząc na to, nie wiem, co nie działa, ponieważ skopiowałem to do nowego projektu z wcześniej używanego kodu. Jedyną różnicą jest źródło JSON. Poprzedni nie miał {"products":
części przed nawiasami []. Czy to mnie wkurza?
Odpowiedzi:
Obiekty
{}
w JavaScript nie mają metody.map()
. To tylko dla tablic ,[]
.Tak więc, aby kod działał, zmień
data.map()
na,data.products.map()
ponieważproducts
jest tablicą, po której możesz iterować.źródło
Właściwą metodą iteracji po obiektach jest
Object.keys(someObject).map(function(item)... Object.keys(someObject).forEach(function(item)...; // ES way Object.keys(data).map(item => {...}); Object.keys(data).forEach(item => {...});
Przeczytaj tutaj, aby uzyskać szczegółowe informacje
źródło
Najprostszą odpowiedzią jest umieszczenie „dane” w parę nawiasów kwadratowych (czyli [dane] ):
$.getJSON("json/products.json").done(function (data) { var allProducts = [data].map(function (item) { return new getData(item); }); });
Tutaj [dane] to tablica i można na niej użyć metody „.map” . Mi to pasuje!
źródło
var data = {foo: 'bar'}; [data].map(function (item) { console.log(item); });
$.getJSON("json/products.json").done(function (data) { var allProducts = new getData(data); });
data
nie jest tablicą, jest obiektem z tablicą produktów, więc należy ją powtarzaćdata.products
var allProducts = data.products.map(function (item) { return new getData(item); });
źródło
Jeśli chcesz zmapować obiekt, możesz użyć Lodash. Po prostu upewnij się, że jest zainstalowany przez NPM lub Yarn i zaimportuj go.
Z Lodash:
Lodash udostępnia funkcję
_.mapValues
mapowania wartości i zachowywania kluczy._.mapValues({ one: 1, two: 2, three: 3 }, function (v) { return v * 3; }); // => { one: 3, two: 6, three: 9 }
źródło
Zawsze możesz wykonać następujące czynności:
const SomeCall = request.get(res => { const Store = []; Store.push(res.data); Store.forEach(item => { DoSomethingNeat }); });
źródło
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 ) } )
źródło
dane muszą być obiektem Json, aby to zrobić, upewnij się, że:
data = $.parseJSON(data);
Teraz możesz zrobić coś takiego:
data.map(function (...) { ... });
Mam nadzieję, że to komuś pomoże
źródło
Wystąpił błąd przy
$.map()
wywołaniu, spróbuj tego: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]); }; }); });
Błąd w kodzie polegał na tym, że
return
wykonałeś wywołanie AJAX, więc zostało wykonane tylko raz.źródło