We Keep Coding

How to access nested values of a JSON file when they are nested multiple times

I have a JSON file like the example listed below.
"SOLAR_SYSTEM": {
"PLANETS": {
"PLANET": [
{
"NAME": "Mercury",
"DISTANCE": "57.91km",
"RADIUS": "2340km",
"LENGTH_OF_YEAR": "0.24085",
"DAY": "88",
"MASS": "0.054",
"DENSITY": "6.03"
},
{
"NAME": "Earth",
"DISTANCE": "149.60",
"RADIUS": "6371",
"LENGTH_OF_YEAR": "1.000039",
"DAY": "24",
"MASS": "1.00",
"DENSITY": "5.517",
"SATELLITES": {
"SATELLITE": {
"NAME": "Moon",
"DISTANCE_FROM_PLANET": "384405",
"ORBIT": "27.322"
}
}
},
{
"NAME": "Mars",
"DISTANCE": "227.9",
"RADIUS": "3324",
"LENGTH_OF_YEAR": "1.88089",
"DAY": "24.5",
"MASS": "0.107",
"DENSITY": "4.16",
"SATELLITES": {
"SATELLITE": [
{
"NAME": "Phobos",
"DISTANCE_FROM_PLANET": "9380",
"ORBIT": "0.319"
},
{
"NAME": "Deimos",
"DISTANCE_FROM_PLANET": "23500",
"ORBIT": "1.262"
}
My question is how to access the data, specifically the SATELLITES --> SATELLITE --> name, distance_from_planet, and orbit.
The code that I've written below works for accessing the data of the non-nested data (a planet's name, distance, radius, etc). As seen below, I have tried using conditional statements to check if a planet has a satellite, but with no success.
$(document).ready(function(){
$.getJSON("./json/planets.json", function(data){
//Loop to retrieve and put data in for non nested json
for(i = 0; i < data.SOLAR_SYSTEM.PLANETS.PLANET.length; i++){
index = i + 1;
//All fields that aren't nested
$("#pName" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].NAME);
$("#pDistance" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].DISTANCE);
$("#pRadius" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].RADIUS);
$("#pLength" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].LENGTH_OF_YEAR);
$("#pDay" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].DAY);
$("#pMass" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].MASS);
$("#pDensity" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].DENSITY);
if(data.SOLAR_SYSTEM.PLANETS.PLANET[i].SATELLITES == null){
continue;
}else{
$("#pSatName_" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].SATELLITES.SATELLITE.NAME);
$("#pDistanceFP_" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].SATELLITES.SATELLITE.DISTANCE_FROM_PLANET);
$("#pOrbit_" + index).html(data.SOLAR_SYSTEM.PLANETS.PLANET[i].SATELLITES.SATELLITE.ORBIT);
//console.log(data.SOLAR_SYSTEM.PLANETS.PLANET[i].SATELLITES.SATELLITE.NAME);
}
}

First off, you can cut down a lot of typing with object destructuring.
let {PLANET} = data.SOLAR_SYSTEM.PLANETS
for(i = 0; i < PLANET.length; i++){
if(PLANET[i].SATTELITES)
let {SATTELITE} = PLANET[i].SATTELITES
else let SATTELITE = null
Then you don't have to type out the whole thing every time.
Like Rory said, data consistency would go a long way, but if you have no control over that you can check whether SATTELITE is an array or an object and access it appropriately.
if(SATTELITE && SATTELITE instanceof Array){
access = SATTELITE[num][key]
}
else if(SATTELITE && SATTELITE instanceof Object{
access = SATTELITE[key]
}

Set filter by partial string in mapbox-gl

My first question here, sorry in advance for any mistake...
I'm developing a mapbox web for my own pleasure, featuring photos taked by myself in a map. Info is loaded in JSON files, with this structure:
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-8.5375900268555,42.881175994873]
},
"properties": {
"title": "Graffiti",
"description": "",
"image": {
"imageSize": [1024, 768], "imageLandscape": 1, "imageUrl": "imgs/gsa_2016_files/20160805173018_OLY_PEP3_P8052307.jpg" },
"icon": {
"iconSize": [96, 73],
"iconUrl": "imgs/gsa_2016_files/thumb_20160805173018_OLY_PEP3_P8052307.jpg"
},
"extended_info": {
"tags": "graffitis,nomada",
"place": "europa,españa,galicia,santiago de compostela"
},
"time": "2016:08:05 17:30:18",
"year": 2016,
"month": 8,
"day": 5
}
}
I work with different JSON files for each map, which are loaded this way:
var map = new mapboxgl.Map({ blah, blah... });
var layerIds = [ '2016' ];
var layerColors = [ 'rgba(255,0,0,1)' ];
function add_sources_to_map()
{
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
var layerId = layerIdPrefix + id;
var geoJsonFile = 'jsons/'+ id + '.geoJSON';
map.addSource(layerId, { type: 'geojson', data: geoJsonFile });
}
}
Later on I use a function to filter elements by year:
function filterByYear(year) {
var filterFullYear = [ '==', 'year', year];
// Aplica os filtros nas capas
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
map.setFilter(id, filterFullYear);
}
}
But I would like to do some more filtering, by part of tags or place content. For example, anyone with a "tag" which contains "nomada", or any "place" with "europe". I have tried to do it but failed miserably, although my knowledge of mapbox-gl or even js is limited. Can this be done? Should I change my JSON structure? Can anybody point me to some help?
TIA!

This is not supported in Mapbox-GL-JS. The issue is being tracked here: https://github.com/mapbox/mapbox-gl-js/issues/4698

loop inside an array throws Uncaught TypeError: Cannot read property '1' of undefined

I am trying to make this simple loot system to work but I keep getting this TypeError and I have tried everything I could think of.
Everything is explained in the code I added below. It was working yesterday but it seems like today is no longer working...
Here is the code in the JS file:
console.info("Working!");
var items;
//here I get the json
$.getJSON('js/items.json', function(data) {
return items = data;
});
//run the function cuz laziness to put it every time in the console
loot();
function loot() {
//these are the drops from the mob
const ids = [1, 2, 3, 4, 5, 6, 7];
//define a random number to see what loot it drops
let rand = Math.floor((Math.random() * 100) + 1);
var loot;
//if the chance is between 1 and 5(including them) do that
if (rand >= 1 && rand <= 5) {
var legends = [];
//here I loop inside the ids constant to see what items are legendary and if they are push them to the legends array
for (var id in ids) {
//HERE IS THE PROBLEM I get Uncaught TypeError here and I have tried everything
if (items[ids[id]].rarity == "Legendary") {
legends.push(ids[id]);
};
};
console.log(`legends: ${legends}`);
//then I random the items inside legends array to get the loot
loot = legends[Math.floor(Math.random() * legends.length)];
};
console.warn(`You looted a ${items[loot].name} | ${items[loot].rarity}`);
};
and here is the JSON file:
{
"1": {
"id": 1,
"name": "Sword of Heaven",
"rarity": "Legendary"
},
"2": {
"id": 2,
"name": "Wooden Sword",
"rarity": "Common"
},
"3": {
"id": 3,
"name": "Glass of the Gods",
"rarity": "Rare"
},
"4": {
"id": 4,
"name": "Minor HP Potion",
"rarity": "Common"
},
"5": {
"id": 5,
"name": "The Enchiridion!",
"rarity": "Legendary"
},
"6": {
"id": 6,
"name": "Major MP Potion",
"rarity": "Rare"
},
"7": {
"id": 7,
"name": "Helm of the Forsaken",
"rarity": "Rare"
}
}

try to move your loot function into asynchronous getJson's callback:
console.info("Working!");
var items;
//here I get the json
$.getJSON('js/items.json', function(data) {
items = data;
//run the function cuz laziness to put it every time in the console
loot();
});
if you run it outside of this callback, items variable is not populated yet
if you want to use as function, move AJAX call into loot function, store result and make sure to run it only once:
function lootRun(refresh) {
// use self in order to reach it from anonymous callback
var self = this;
if (!self.items || refresh) {
$.getJSON('js/items.json', function(data) {
// kind of inner functional cache
self.items = data;
loot(self.items);
});
}
else {
loot(self.items);
}
}
function loot(items) {
//these are the drops from the mob
const ids = [1, 2, 3, 4, 5, 6, 7];
//define a random number to see what loot it drops
let rand = Math.floor((Math.random() * 100) + 1);
var loot;
//if the chance is between 1 and 5(including them) do that
if (rand >= 1 && rand <= 5) {
var legends = [];
//here I loop inside the ids constant to see what items are legendary and if they are push them to the legends array
ids.forEach(function(id) {
//HERE IS THE PROBLEM I get Uncaught TypeError here and I have tried everything
if (items[id].rarity == "Legendary") {
legends.push(id);
};
});
console.log(`legends: ${legends}`);
//then I random the items inside legends array to get the loot
loot = legends[Math.floor(Math.random() * legends.length)];
console.warn(`You looted a ${items[loot].name} | ${items[loot].rarity}`);
};
};
now you can run your main loot function via lootRun, pass true to lootRun, if you want to refresh data from server

A few things to note - getJson is asynchronous, so items may be undefined. Move it into the getJson callback. Also, you're trying to get the name of an item that's undefined. You need to move the last console.log statement into the if statement so that you aren't using loot (which is undefined) to index the array.
var data = {
"1": {
"id": 1,
"name": "Sword of Heaven",
"rarity": "Legendary"
},
"2": {
"id": 2,
"name": "Wooden Sword",
"rarity": "Common"
},
"3": {
"id": 3,
"name": "Glass of the Gods",
"rarity": "Rare"
},
"4": {
"id": 4,
"name": "Minor HP Potion",
"rarity": "Common"
},
"5": {
"id": 5,
"name": "The Enchiridion!",
"rarity": "Legendary"
},
"6": {
"id": 6,
"name": "Major MP Potion",
"rarity": "Rare"
},
"7": {
"id": 7,
"name": "Helm of the Forsaken",
"rarity": "Rare"
}
};
// here I get the json
$.getJSON('js/items.json', function(data) {
loot(data);
});
function loot(items) {
//these are the drops from the mob
const ids = [1, 2, 3, 4, 5, 6, 7];
//define a random number to see what loot it drops
let rand = Math.floor((Math.random() * 100) + 1);
var loot;
//if the chance is between 1 and 5(including them) do that
if (rand >= 1 && rand <= 5) {
var legends = [];
//here I loop inside the ids constant to see what items are legendary and if they are push them to the legends array
ids.forEach(function(id) {
//HERE IS THE PROBLEM I get Uncaught TypeError here and I have tried everything
if (items[id].rarity == "Legendary") {
legends.push(id);
};
});
console.log(`legends: ${legends}`);
//then I random the items inside legends array to get the loot
loot = legends[Math.floor(Math.random() * legends.length)];
console.warn(`You looted a ${items[loot].name} | ${items[loot].rarity}`);
};
};

Converting JSON to a Javascript array using pure Javascript

I have the following part of a JSON file. I need to convert to a Javascript array using pure Javascript. Specifically, I need to have an array
userid, movieid, rating, timestamp only for rating greater than 4.0.
[{
"rating": 3.0,
"ratingsPK": {
"movieId": 2017,
"userId": 610
},
"timestamp": 913815387
}, {
"rating": 5.0,
"ratingsPK": {
"movieId": 2017,
"userId": 654
},
"timestamp": 959098930
}, {
"rating": 4.0,
"ratingsPK": {
"movieId": 2017,
"userId": 856
},
"timestamp": 1059863336
}, {
"rating": 2.0,
"ratingsPK": {
"movieId": 2017,
"userId": 903
},
"timestamp": 903628492
}, {
"rating": 3.5,
"ratingsPK": {
"movieId": 2017,
"userId": 1185
},
"timestamp": 1100560205
}]

You can use JSON.parse() to convert a JSON string to a JavaScript object. Then use Array#filter with appropriate predicate to get exactly what you need (in your case, timestamp greater than 4).

Simple "one-line" solution using JSON.parse() and Array.prototype.filter() functions:
var json_data = '[{"rating":3.0,"ratingsPK":{"movieId":2017,"userId":610},"timestamp":913815387},{"rating":5.0,"ratingsPK":{"movieId":2017,"userId":654},"timestamp":959098930},{"rating":4.0,"ratingsPK":{"movieId":2017,"userId":856},"timestamp":1059863336},{"rating":2.0,"ratingsPK":{"movieId":2017,"userId":903},"timestamp":903628492},{"rating":3.5,"ratingsPK":{"movieId":2017,"userId":1185},"timestamp":1100560205}]';
var arr = JSON.parse(json_data).filter(function(o){ return o.rating >= 4; });
console.log(arr);
The same but in EcmaScript6 manner(using arrow function):
var json_data = '[{"rating":3.0,"ratingsPK":{"movieId":2017,"userId":610},"timestamp":913815387},{"rating":5.0,"ratingsPK":{"movieId":2017,"userId":654},"timestamp":959098930},{"rating":4.0,"ratingsPK":{"movieId":2017,"userId":856},"timestamp":1059863336},{"rating":2.0,"ratingsPK":{"movieId":2017,"userId":903},"timestamp":903628492},{"rating":3.5,"ratingsPK":{"movieId":2017,"userId":1185},"timestamp":1100560205}]';
var arr = JSON.parse(json_data).filter((o) => o.rating >= 4 );
console.log(arr);

After converting to an object and filtering for rating, you could get an array with taking only the parts of the object, you need.
var data = '[{"rating":3.0,"ratingsPK":{"movieId":2017,"userId":610},"timestamp":913815387},{"rating":5.0,"ratingsPK":{"movieId":2017,"userId":654},"timestamp":959098930},{"rating":4.0,"ratingsPK":{"movieId":2017,"userId":856},"timestamp":1059863336},{"rating":2.0,"ratingsPK":{"movieId":2017,"userId":903},"timestamp":903628492},{"rating":3.5,"ratingsPK":{"movieId":2017,"userId":1185},"timestamp":1100560205}]',
result = JSON.parse(data).filter(function (a) {
return a.rating > 4;
}).map(function (a) {
return [a.ratingsPK.userId, a.ratingsPK.movieId, a.rating, a.timestamp];
});
console.log(result);

You can read the JSON File using XMLHttpRequest and that will return as string and imagine you got the file data in variable. jsonFile
Use JSON.parse like below.
var rating = JSON.parse(jsonFile);
Below is the Working Example.
var rating = [
{"rating":3.0,"ratingsPK":{"movieId":2017,"userId":610},"timestamp":913815387},
{"rating":5.0,"ratingsPK":{"movieId":2017,"userId":654},"timestamp":959098930},
{"rating":4.0,"ratingsPK":{"movieId":2017,"userId":856},"timestamp":1059863336},
{"rating":2.0,"ratingsPK":{"movieId":2017,"userId":903},"timestamp":903628492},
{"rating":3.5,"ratingsPK":{"movieId":2017,"userId":1185},"timestamp":1100560205}
];
var bestRated = [];
rating.forEach(function (item) {
if(item.rating > 4) {
bestRated.push({
userid: item.ratingsPK.userId,
movieid: item.ratingsPK.movieId,
rating: item.rating,
timestamp: item.timestamp
});
}
});
console.log('bestRated: ', bestRated);

JSON.parse() can be used to convert JSON to JS object. Below is a exmaple to suit your need.
var data='[{"rating":1.0,"ratingsABC":{"movieId":2017,"userId":123},"timestamp":913815387},{"rating":1.0,"ratingsABC":{"movieId":2017,"userId":123},"timestamp":913815387},{"rating":1.0,"ratingsABC":{"movieId":2017,"userId":123},"timestamp":913815387}]';
var sortedData= JSON.parse(data).filter((a) => a.rating >= 4 );

This is without using any fancy API:
var jsonArr = [
{"rating":3.0,"ratingsPK":{"movieId":2017,"userId":610},"timestamp":913815387},
{"rating":5.0,"ratingsPK":{"movieId":2017,"userId":654},"timestamp":959098930},
{"rating":4.0,"ratingsPK":{"movieId":2017,"userId":856},"timestamp":1059863336},
{"rating":2.0,"ratingsPK":{"movieId":2017,"userId":903},"timestamp":903628492},
{"rating":3.5,"ratingsPK":{"movieId":2017,"userId":1185},"timestamp":1100560205}];
var arr = [];
for(var x in jsonArr){
if(jsonArr[x]['rating'] > 4.0 ){
arr.push(jsonArr[x]['ratingsPK']['userId']);
arr.push(jsonArr[x]['ratingsPK']['movieId']);
arr.push(jsonArr[x]['rating']);
arr.push(jsonArr[x]['timestamp']);
}
}
console.log(arr);

Generate a Required File using JavaScript

I need to generate a JSON file using a JAVA script , but am not getting the expected output , can you help me generating out put of this .
Expected out put :
{
"ewh5yuwe": {
"NumCopies": "1",
"NumPages": "10",
"Status": "done printing",
"Title": "demo.jpg",
"Username": "keshavka",
"date": "23:06 Feb 5, 15",
"print status": "OK",
"time": "1429036296",
"timestamp done printing": "${__time(yyyyMMddHMS)"
}
}
out put received after calling print(); function is as below:
""rYajbQx":{[object Object]}"
code:
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 7; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
//above Code is to generate a Random variable
function test() {
var jobid = Math.random();
var jobkey = jobid;
var time = new Date().getTime()
var kes = makeid()
var joblog = {
"NumCopies": "1",
"Status": "done printing",
"Title": "demo.jpg",
"Username": "keshavka",
"date": "23:06 Feb 5, 15",
"print status": "OK",
"time": "1429036296",
"timestamp done printing": time
};
json = JSON.stringify(joblog);
console.log(joblog);
return joblog;
}
// Above code is to generate JSON
var x = test();
console.log(x);
var y = makeid();
console.log(y);
function print() {
a = ('{' + (test()) + '}');
return a;
}

The problem is that you're not returning the JSON, but the object itself.
function test() {
[...]
var json = JSON.stringify(joblog);
console.log(json);
return json;
}

Ok, I think I know what you want. You want to return an object that has a property on it with the name of the id you generate and its value set to the properties listed in the code above. The main thing I would change is how the object is created. So in your test function I would make the following changes:
var joblog = {};
joblog[kes] = {
"NumCopies":"1",
"Status": "done printing",
"Title": "demo.jpg",
"Username": "keshavka",
"date": "23:06 Feb 5, 15",
"print status": "OK",
"time": "1429036296",
"timestamp done printing": time
};
So if you generate an id of '5YhDv7n', you would get an object of type:
{
5YhDv7n:{
ObjectNumCopies: "1",
Status: "done printing",
Title: "demo.jpg",
Username: "keshavka",
date: "23:06 Feb 5, 15",
print status: "OK",
time: "1429036296",
timestamp done printing: 1435580266234
}
}
I edited the JSFiddle I made to reflect these changes.