I'm bashing my head against an error I can't work out how to fix. I have the following;
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"
}
}
]}
and the following 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);
});
});
yet I'm getting an error that map.data is undefined as a function? Looking at it I don't know what's not working as I've copied this to a new project from previously used code. The only thing different is the JSON source. The previous one didn't have the {"products":
part before the [] brackets. Is this what's throwing me off?
Objects, {}
in JavaScript does not have the method .map()
. It's only for Arrays, []
.
So in order for your code to work change data.map()
to data.products.map()
since products
is an array which you can iterate upon.
There is an error on $.map()
invocation, try this:
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]);
};
});
});
The error in your code was that you made return
in your AJAX call, so it executed only one time.
data
is not an array, it is an object with an array of products so iterate over data.products
var allProducts = data.products.map(function (item) {
return new getData(item);
});
data needs to be Json object, to do so please make sure the follow:
data = $.parseJSON(data);
Now you can do something like:
data.map(function (...) {
...
});
I hope this help some one
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 ) } )
You can always do the following:
const SomeCall = request.get(res => {
const Store = [];
Store.push(res.data);
Store.forEach(item => { DoSomethingNeat
});
});
The right way to iterate over objects is
Object.keys(someObject).map(function(item)...
Object.keys(someObject).forEach(function(item)...;
// ES way
Object.keys(data).map(item => {...});
Object.keys(data).forEach(item => {...});
If you want to map an object you can use Lodash. Just make sure it's installed via NPM or Yarn and import it.
With Lodash:
Lodash provides a function _.mapValues
to map the values and preserve the keys.
_.mapValues({ one: 1, two: 2, three: 3 }, function (v) { return v * 3; });
// => { one: 3, two: 6, three: 9 }
The SIMPLEST answer is to put "data" into a pair of square brackets (i.e. [data]):
$.getJSON("json/products.json").done(function (data) {
var allProducts = [data].map(function (item) {
return new getData(item);
});
});
Here, [data] is an array, and the ".map" method can be used on it. It works for me!
Source: Stackoverflow.com