I tried alot of things, but nothing worked. I'm using jQuery.
So what I have to do is really to import http://jacce.dyndns.org/game/resources/game/map.php (so far I succeeded with $.getJSON), convert it to an array and then place it in a global variable.
I don't really know how to do any of the last two things (well, I know how to create global variables, but not inside jQuery functions). So, any help?
EDIT: Here's the JSON:
{
"-5": {
"-5": {
"id": "1",
"colour": ""
},
"-4": {
"id": "2",
"colour": ""
},
"-3": {
"id": "3",
"colour": ""
},
"-2": {
"id": "4",
"colour": ""
},
"-1": {
"id": "5",
"colour": ""
},
"1": {
"id": "6",
"colour": ""
},
"2": {
"id": "7",
"colour": ""
},
"3": {
"id": "8",
"colour": ""
},
"4": {
"id": "9",
"colour": ""
},
"5": {
"id": "10",
"colour": ""
}
},
"-4": {
"-5": {
"id": "11",
"colour": " fill=\"#A90000\""
},
"-4": {
"id": "12",
"colour": ""
},
"-3": {
"id": "13",
"colour": ""
},
"-2": {
"id": "14",
"colour": ""
},
"-1": {
"id": "15",
"colour": ""
},
"1": {
"id": "16",
"colour": ""
},
"2": {
"id": "17",
"colour": ""
},
"3": {
"id": "18",
"colour": ""
},
"4": {
"id": "19",
"colour": " fill=\"#A90000\""
},
"5": {
"id": "20",
"colour": ""
}
},
"-3": {
"-5": {
"id": "21",
"colour": ""
},
"-4": {
"id": "22",
"colour": ""
},
"-3": {
"id": "23",
"colour": ""
},
"-2": {
"id": "24",
"colour": ""
},
"-1": {
"id": "25",
"colour": ""
},
"1": {
"id": "26",
"colour": ""
},
"2": {
"id": "27",
"colour": ""
},
"3": {
"id": "28",
"colour": ""
},
"4": {
"id": "29",
"colour": " fill=\"#A90000\""
},
"5": {
"id": "30",
"colour": ""
}
},
"-2": {
"-5": {
"id": "31",
"colour": ""
},
"-4": {
"id": "32",
"colour": ""
},
"-3": {
"id": "33",
"colour": ""
},
"-2": {
"id": "34",
"colour": ""
},
"-1": {
"id": "35",
"colour": ""
},
"1": {
"id": "36",
"colour": ""
},
"2": {
"id": "37",
"colour": ""
},
"3": {
"id": "38",
"colour": ""
},
"4": {
"id": "39",
"colour": ""
},
"5": {
"id": "40",
"colour": ""
}
},
"-1": {
"-5": {
"id": "41",
"colour": ""
},
"-4": {
"id": "42",
"colour": ""
},
"-3": {
"id": "43",
"colour": " fill=\"#A90000\""
},
"-2": {
"id": "44",
"colour": ""
},
"-1": {
"id": "45",
"colour": ""
},
"1": {
"id": "46",
"colour": ""
},
"2": {
"id": "47",
"colour": ""
},
"3": {
"id": "48",
"colour": ""
},
"4": {
"id": "49",
"colour": ""
},
"5": {
"id": "50",
"colour": ""
}
},
"1": {
"-5": {
"id": "51",
"colour": " fill=\"#A90000\""
},
"-4": {
"id": "52",
"colour": ""
},
"-3": {
"id": "53",
"colour": ""
},
"-2": {
"id": "54",
"colour": " fill=\"#A90000\""
},
"-1": {
"id": "55",
"colour": ""
},
"1": {
"id": "56",
"colour": ""
},
"2": {
"id": "57",
"colour": ""
},
"3": {
"id": "58",
"colour": ""
},
"4": {
"id": "59",
"colour": ""
},
"5": {
"id": "60",
"colour": ""
}
},
"2": {
"-5": {
"id": "61",
"colour": ""
},
"-4": {
"id": "62",
"colour": ""
},
"-3": {
"id": "63",
"colour": ""
},
"-2": {
"id": "64",
"colour": ""
},
"-1": {
"id": "65",
"colour": ""
},
"1": {
"id": "66",
"colour": ""
},
"2": {
"id": "67",
"colour": ""
},
"3": {
"id": "68",
"colour": ""
},
"4": {
"id": "69",
"colour": ""
},
"5": {
"id": "70",
"colour": ""
}
},
"3": {
"-5": {
"id": "71",
"colour": ""
},
"-4": {
"id": "72",
"colour": " fill=\"#000D81\""
},
"-3": {
"id": "73",
"colour": ""
},
"-2": {
"id": "74",
"colour": ""
},
"-1": {
"id": "75",
"colour": ""
},
"1": {
"id": "76",
"colour": ""
},
"2": {
"id": "77",
"colour": ""
},
"3": {
"id": "78",
"colour": ""
},
"4": {
"id": "79",
"colour": ""
},
"5": {
"id": "80",
"colour": " fill=\"#A90000\""
}
},
"4": {
"-5": {
"id": "81",
"colour": ""
},
"-4": {
"id": "82",
"colour": ""
},
"-3": {
"id": "83",
"colour": ""
},
"-2": {
"id": "84",
"colour": ""
},
"-1": {
"id": "85",
"colour": ""
},
"1": {
"id": "86",
"colour": " fill=\"#A90000\""
},
"2": {
"id": "87",
"colour": ""
},
"3": {
"id": "88",
"colour": ""
},
"4": {
"id": "89",
"colour": ""
},
"5": {
"id": "90",
"colour": ""
}
},
"5": {
"-5": {
"id": "91",
"colour": ""
},
"-4": {
"id": "92",
"colour": ""
},
"-3": {
"id": "93",
"colour": " fill=\"#A90000\""
},
"-2": {
"id": "94",
"colour": ""
},
"-1": {
"id": "95",
"colour": ""
},
"1": {
"id": "96",
"colour": ""
},
"2": {
"id": "97",
"colour": ""
},
"3": {
"id": "98",
"colour": ""
},
"4": {
"id": "99",
"colour": ""
},
"5": {
"id": "100",
"colour": ""
}
}
}
Ima place this answer cos I think the OP has confused arrays and objects.
This will work:
var t;
$.getJSON('/url', {param: someparam}, function(data){
t = data;
});
The data var represents the stringifyed JSON output and you basically just pass the output to a globally defined var...done.
It will get your JSON out all into one Object. You cannot have an array since minus numbers are not counted as int arrray keys in JS.
Bu this will allow you to do:
$.each(t, function(){
console.log($(this));
});
And get your "row" out.
Or like:
t['-3'];
To understand this difference between arrays and Objects read here: http://www.hunlock.com/blogs/Mastering_Javascript_Arrays
And another link: What is the difference between an array and an object?
Related
I've been trying to find the solution for a few days but no success. It is only exemple I need of a function that execute this with any selectedNode. I will use it in a graph.
The array:
const edges = [
{
"id": "e1-2",
"from": "1",
"to": "2"
},
{
"id": "e2-3",
"from": "2",
"to": "3"
},
{
"id": "e2-8",
"from": "2",
"to": "8"
},
{
"id": "e2-13",
"from": "2",
"to": "13"
},
{
"id": "e3-4",
"from": "3",
"to": "4"
},
{
"id": "e4-5",
"from": "4",
"to": "5"
},
{
"id": "e4-6",
"from": "4",
"to": "6"
},
{
"id": "e4-7",
"from": "4",
"to": "7"
},
{
"id": "e8-9",
"from": "8",
"to": "9"
},
{
"id": "e9-10",
"from": "9",
"to": "10"
},
{
"id": "e9-11",
"from": "9",
"to": "11"
},
{
"id": "e9-12",
"from": "9",
"to": "12"
},
{
"id": "e13-14",
"from": "13",
"to": "14"
},
{
"id": "e14-15",
"from": "14",
"to": "15"
},
{
"id": "e14-16",
"from": "14",
"to": "16"
},
{
"id": "e14-17",
"from": "14",
"to": "17"
},
{
"id": "e14-18",
"from": "14",
"to": "18"
},
{
"id": "e14-19",
"from": "14",
"to": "19"
}
]
I trying use filter and map but only catch the first children. I need the children of children and so on.
const selectedNode = "2";
const connections = edges
.filter((edge) => edge.from === selectedNode).map((edge) => edge.to)
console.log(connections)
The output:
[LOG]: ["3", "8", "13"]
but i need all children as cascade.
Like this output:
["3", "8", "13", "4", "5", "6", "7", "9", "10", "11", "12", "14", "15", "16", "17", "18", "19"]
But if the selectedNode was "8", the array would be:
["9", "10", "11", "12"]
You need to make a recursive algorithm of some kind. One approach would be to restructure the edges into a mapping by froms first. Then, when iterating over an edge (starting with the selectedNode), if the edge's to contains any other tos, perform the recursive call for each one.
const edges=[{id:"e1-2",from:"1",to:"2"},{id:"e2-3",from:"2",to:"3"},{id:"e2-8",from:"2",to:"8"},{id:"e2-13",from:"2",to:"13"},{id:"e3-4",from:"3",to:"4"},{id:"e4-5",from:"4",to:"5"},{id:"e4-6",from:"4",to:"6"},{id:"e4-7",from:"4",to:"7"},{id:"e8-9",from:"8",to:"9"},{id:"e9-10",from:"9",to:"10"},{id:"e9-11",from:"9",to:"11"},{id:"e9-12",from:"9",to:"12"},{id:"e13-14",from:"13",to:"14"},{id:"e14-15",from:"14",to:"15"},{id:"e14-16",from:"14",to:"16"},{id:"e14-17",from:"14",to:"17"},{id:"e14-18",from:"14",to:"18"},{id:"e14-19",from:"14",to:"19"}];
const toByFrom = {};
for (const edge of edges) {
toByFrom[edge.from] ??= [];
toByFrom[edge.from].push(edge.to);
}
const allNodes = [];
const getNodes = (parent, allNodes = []) => {
const tos = toByFrom[parent];
if (tos) {
allNodes.push(...tos);
for (const to of tos) {
getNodes(to, allNodes);
}
}
return allNodes;
};
console.log(getNodes('2'));
This sounds like a recursion mission. This is the same answer as the other one. Only as a function.
const edges = [{ "id": "e1-2", "from": "1", "to": "2" }, { "id": "e2-3", "from": "2", "to": "3" }, { "id": "e2-8", "from": "2", "to": "8" }, { "id": "e2-13", "from": "2", "to": "13" }, { "id": "e3-4", "from": "3", "to": "4" }, { "id": "e4-5", "from": "4", "to": "5" }, { "id": "e4-6", "from": "4", "to": "6" }, { "id": "e4-7", "from": "4", "to": "7" }, { "id": "e8-9", "from": "8", "to": "9" }, { "id": "e9-10", "from": "9", "to": "10" }, { "id": "e9-11", "from": "9", "to": "11" }, { "id": "e9-12", "from": "9", "to": "12" }, { "id": "e13-14", "from": "13", "to": "14" }, { "id": "e14-15", "from": "14", "to": "15" }, { "id": "e14-16", "from": "14", "to": "16" }, { "id": "e14-17", "from": "14", "to": "17" }, { "id": "e14-18", "from": "14", "to": "18" }, { "id": "e14-19", "from": "14", "to": "19" }];
function find_immediate_edges(selected) {
return edges.filter(item => item.from == selected).map(item => item.to);
}
function find_edges(selected) {
var result = []
function loop(selected) {
var immediate = find_immediate_edges(selected);
result = result.concat(immediate)
immediate.forEach(loop)
}
loop(selected);
return result;
}
console.log("" + find_edges(2));
console.log("" + find_edges(8));
This question already has answers here:
Finding the max value of an attribute in an array of objects
(21 answers)
Closed 1 year ago.
I try to find the highest key value of 'sequence' where it's value is 'true'.
I know it's not sql, but I would like know if it's possible to do this request on javascript.
For example, in my case I would like to have : 5 because "70" it's the highest value with bug_tab is true.
Here my js array myTab :
[
{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
]
What I have do :
This return the first occurence where bug_tab is equal to true :
var indexbugTabArray = myTab.map(function(o) { return o.bug_tab; }).indexOf(true);
Advance thanks,
Use array.reduce to get the highest index.
Also, as noted by another user, the correct answer based on your description is 4, not 5 like you said.
var arr = [{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
];
var res = arr.reduce((acc, curr, idx, arr) =>
curr.bug_tab && +curr.sequence > +arr[acc].sequence ? idx : acc
, 0);
console.log(res);
It can be done like that, maybe it's not the most efficient way but it works as expected
const toto = [
{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
];
const max = {
index: -1, // -1 so you can check if you find one
value: 0,
};
toto.forEach((el, index) => {
if (+el.sequence > max.value && el.bug_tab) {
max.index = index;
max.value = +el.sequence;
}
});
console.log(max.index, max.value, toto[max.index]);
I am trying to achieve a scalable solution for creating a tree structure with n level nesting of Objects within Objects. Baiscally, I want to create a Web Component which can be used as a Tree component when it is fed a with nested JSON structure.
E.g. Sample JSON is what I am showing below:
this._sData = {
"column_definition": {
"0": {
"property": "display_key",
"title": "Country"
},
"1": {
"property": "text",
"title": ""
}
},
"root": {
"0": {
"0": {
"0": {
"display_key": "8",
"text": "Belgium",
"value": "000000000000000000000000000008"
},
"1": {
"display_key": "18",
"text": "Czech Republic",
"value": "000000000000000000000000000018"
},
"10": {
"display_key": "37",
"text": "Luxembourg",
"value": "000000000000000000000000000037"
},
"11": {
"display_key": "42",
"text": "Netherlands",
"value": "000000000000000000000000000042"
},
"2": {
"display_key": "19",
"text": "Denmark",
"value": "000000000000000000000000000019"
},
"3": {
"display_key": "23",
"text": "England",
"value": "000000000000000000000000000023"
},
"4": {
"display_key": "24",
"text": "Finland",
"value": "000000000000000000000000000024"
},
"5": {
"display_key": "25",
"text": "France",
"value": "000000000000000000000000000025"
},
"6": {
"display_key": "26",
"text": "Germany",
"value": "000000000000000000000000000026"
},
"7": {
"display_key": "27",
"text": "Greece",
"value": "000000000000000000000000000027"
},
"8": {
"display_key": "28",
"text": "Hungary",
"value": "000000000000000000000000000028"
},
"9": {
"display_key": "31",
"text": "Ireland",
"value": "000000000000000000000000000031"
},
"display_key": "EUROPE",
"state": "E",
"text": "EUROPE",
"value": "HIERARCHY_NODE/0HIER_NODE/EUROPE"
},
"1": {
"0": {
"display_key": "13",
"text": "Canada",
"value": "000000000000000000000000000013"
},
"1": {
"display_key": "67",
"text": "USA",
"value": "000000000000000000000000000067"
},
"display_key": "NORTH_AMERICA",
"state": "E",
"text": "NORTH_AMERICA",
"value": "HIERARCHY_NODE/0HIER_NODE/NORTH_AMERICA"
},
"2": {
"0": {
"display_key": "3",
"text": "Australia",
"value": "000000000000000000000000000003"
},
"1": {
"display_key": "6",
"text": "Bangladesh",
"value": "000000000000000000000000000006"
},
"2": {
"display_key": "15",
"text": "China",
"value": "000000000000000000000000000015"
},
"3": {
"display_key": "30",
"text": "Indonesia",
"value": "000000000000000000000000000030"
},
"4": {
"display_key": "35",
"text": "Japan",
"value": "000000000000000000000000000035"
},
"5": {
"display_key": "38",
"text": "Malaysia",
"value": "000000000000000000000000000038"
},
"6": {
"display_key": "41",
"text": "Nepal",
"value": "000000000000000000000000000041"
},
"7": {
"display_key": "50",
"text": "Philippines",
"value": "000000000000000000000000000050"
},
"8": {
"display_key": "58",
"text": "Singapore",
"value": "000000000000000000000000000058"
},
"9": {
"display_key": "63",
"text": "Thailand",
"value": "000000000000000000000000000063"
},
"display_key": "ASIA_PAC",
"state": "E",
"text": "ASIA_PAC",
"value": "HIERARCHY_NODE/0HIER_NODE/ASIA_PAC"
},
"3": {
"0": {
"display_key": "36",
"text": "Kenya",
"value": "000000000000000000000000000036"
},
"1": {
"display_key": "47",
"text": "Pakistan",
"value": "000000000000000000000000000047"
},
"2": {
"display_key": "56",
"text": "Saudi Arabia",
"value": "000000000000000000000000000056"
},
"3": {
"display_key": "59",
"text": "South Africa",
"value": "000000000000000000000000000059"
},
"4": {
"display_key": "64",
"text": "Turkey",
"value": "000000000000000000000000000064"
},
"5": {
"display_key": "66",
"text": "United Arab Emirates",
"value": "000000000000000000000000000066"
},
"6": {
"display_key": "71",
"text": "Zimbabwe",
"value": "000000000000000000000000000071"
},
"display_key": "MIDDLE_EAST",
"state": "E",
"text": "MIDDLE_EAST",
"value": "HIERARCHY_NODE/0HIER_NODE/MIDDLE_EAST"
},
"display_key": "WORLD",
"state": "E",
"text": "WORLD",
"value": "HIERARCHY_NODE/0HIER_NODE/WORLD"
},
"36": {
"0": {
"value": "Loading"
},
"display_key": "REST_H",
"state": "C",
"text": "Not Assigned Country (s)",
"value": "HIERARCHY_NODE/1HIER_REST/REST_H"
},
"value": "root"
}
}
}
I am using the following function to iterate and map the nested objects:
let flattenObject = (obj) => {
let result = {};
Object.keys(obj).forEach(item => {
if(typeof(obj[item]) == 'object'){
Object.keys(obj[item]).forEach(nestedItem => {
if(typeof(obj[nestedItem]) == 'object'){
flattenObject(obj[nestedItem]);
}
else{
result = Object.assign({}, obj[item]);
}
})
}
})
return result;
}
I expect the output to be something like this when I parsing the JSON and rendering in the HTML:
<ul>World
<li><ul>Europe
<li>Czech Republic</li>
<li>Belgium</li>
<li>United Kingdom</li></ul>
<ul>Asia
<li>China</li>
<li>India</li>
...etc.
</ul>
<ul>Rest of World
<li>Honduras</li>
...etc.
Also nexting of objects can be of n-levels so I want a generic solution.
You could take an iterative and recursive approach.
function getList(object) {
return Object.values(object).reduce((ul, v) => {
if (!v || typeof v !== 'object') return ul;
var li = document.createElement('li');
li.appendChild(document.createTextNode(v.text));
li.appendChild(getList(v));
ul.appendChild(li);
return ul;
}, document.createElement('ul'));
}
var data = { column_definition: { "0": { property: "display_key", title: "Country" }, "1": { property: "text", title: "" } }, root: { "0": { "0": { "0": { display_key: "8", text: "Belgium", value: "000000000000000000000000000008" }, "1": { display_key: "18", text: "Czech Republic", value: "000000000000000000000000000018" }, "2": { display_key: "19", text: "Denmark", value: "000000000000000000000000000019" }, "3": { display_key: "23", text: "England", value: "000000000000000000000000000023" }, "4": { display_key: "24", text: "Finland", value: "000000000000000000000000000024" }, "5": { display_key: "25", text: "France", value: "000000000000000000000000000025" }, "6": { display_key: "26", text: "Germany", value: "000000000000000000000000000026" }, "7": { display_key: "27", text: "Greece", value: "000000000000000000000000000027" }, "8": { display_key: "28", text: "Hungary", value: "000000000000000000000000000028" }, "9": { display_key: "31", text: "Ireland", value: "000000000000000000000000000031" }, "10": { display_key: "37", text: "Luxembourg", value: "000000000000000000000000000037" }, "11": { display_key: "42", text: "Netherlands", value: "000000000000000000000000000042" }, display_key: "EUROPE", state: "E", text: "EUROPE", value: "HIERARCHY_NODE/0HIER_NODE/EUROPE" }, "1": { "0": { display_key: "13", text: "Canada", value: "000000000000000000000000000013" }, "1": { display_key: "67", text: "USA", value: "000000000000000000000000000067" }, display_key: "NORTH_AMERICA", state: "E", text: "NORTH_AMERICA", value: "HIERARCHY_NODE/0HIER_NODE/NORTH_AMERICA" }, "2": { "0": { display_key: "3", text: "Australia", value: "000000000000000000000000000003" }, "1": { display_key: "6", text: "Bangladesh", value: "000000000000000000000000000006" }, "2": { display_key: "15", text: "China", value: "000000000000000000000000000015" }, "3": { display_key: "30", text: "Indonesia", value: "000000000000000000000000000030" }, "4": { display_key: "35", text: "Japan", value: "000000000000000000000000000035" }, "5": { display_key: "38", text: "Malaysia", value: "000000000000000000000000000038" }, "6": { display_key: "41", text: "Nepal", value: "000000000000000000000000000041" }, "7": { display_key: "50", text: "Philippines", value: "000000000000000000000000000050" }, "8": { display_key: "58", text: "Singapore", value: "000000000000000000000000000058" }, "9": { display_key: "63", text: "Thailand", value: "000000000000000000000000000063" }, display_key: "ASIA_PAC", state: "E", text: "ASIA_PAC", value: "HIERARCHY_NODE/0HIER_NODE/ASIA_PAC" }, "3": { "0": { display_key: "36", text: "Kenya", value: "000000000000000000000000000036" }, "1": { display_key: "47", text: "Pakistan", value: "000000000000000000000000000047" }, "2": { display_key: "56", text: "Saudi Arabia", value: "000000000000000000000000000056" }, "3": { display_key: "59", text: "South Africa", value: "000000000000000000000000000059" }, "4": { display_key: "64", text: "Turkey", value: "000000000000000000000000000064" }, "5": { display_key: "66", text: "United Arab Emirates", value: "000000000000000000000000000066" }, "6": { display_key: "71", text: "Zimbabwe", value: "000000000000000000000000000071" }, display_key: "MIDDLE_EAST", state: "E", text: "MIDDLE_EAST", value: "HIERARCHY_NODE/0HIER_NODE/MIDDLE_EAST" }, display_key: "WORLD", state: "E", text: "WORLD", value: "HIERARCHY_NODE/0HIER_NODE/WORLD" }, "36": { "0": { value: "Loading" }, display_key: "REST_H", state: "C", text: "Not Assigned Country (s)", value: "HIERARCHY_NODE/1HIER_REST/REST_H" }, value: "root" } };
document.body.appendChild(getList(data.root));
I am using AngularJs doing a simple application And I want to set a variable up in a javascript file in orther to call a json file.
This is my data.js :
[{
var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]
And this is my data.json
[{
"date":"01/05/2016"
}]
I call my data here.
angular.module("myApp",['zingchart-angularjs'])
.controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.chartBase = {
"type": "line",
"plotarea": {
"adjust-layout": true /* For automatic margin adjustment. */
},
"scale-x": {
"label": {
"text": "Above is an example of a category scale" /* Add a scale title with a label object. */
},
"labels": ["name1", "name2", "name3"] /* Add your scale labels with a labels array. */
},
"series": [{
"values": [15, 18, 11] //here the prices of city selected
},{
"values": [10, 11, 14] //here the qte of city selected
}]
};
$scope.chartData = angular.copy($scope.chartBase);
$http.get('data.js')
.then(function(response) {
$scope.cities = response.data; // save the request data
$scope.selectedCity = $scope.cities[0]; // select the first one
$scope.changeCity(); // update chart
}, function(error) { console.log(error); });
$scope.changeCity = function() {
if($scope.selectedSubCity || $scope.selectedCity){ // if something has been selected
$scope.data = ($scope.selectedSubCity || $scope.selectedCity).elements; // update elements field
// initialize the array to be displayed in chart
var labels = [];
var price = {
"values": []
};
var qte = {
"values": []
};
// fill the arrays to be displayed from the selected city (sub city)
angular.forEach($scope.data, function(item, index) {
labels.push(item.name);
price.values.push(parseInt(item.price));
qte.values.push(parseInt(item.qte));
});
console.log($scope.chartData)
// put selected values to the field that is used to render the chart
$scope.chartData["scale-x"].labels = labels;
$scope.chartData.series = [ price, qte ];
}
}
}]);
When I run this, the browser tell that I have this error :
SyntaxError: Unexpected token v in JSON at position 5
at Object.parse (native)
You can't have those in your data.js file as they are not valid JSON
var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
The error is pointing to the first "v" of "var". You can test your JSON here http://json.parser.online.fr/ on some other online validator.
Your file should look like this:
[{
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]
var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
Why do you add those at the beginning of the JSON ? They cannot be parsed by your script, thus displaying the Syntax Error. What do you want to do exactly ?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have been taking some online courses recently to try and understand the basics of programming, Gradually trying to increase the complexity of what I am learning. However I cannot seem to be able to control the output of my loop, I either get the last value or [object,object object,object object, object,object]
Any help would be greatly appreciated, I am sure this is quite simple but I have tried for in's for's and for each's and no luck so far.
{
"years": [
{
"id": "1",
"year": "2015",
"total": "55045",
"points": [
{
"id": "2",
"points": "600",
"total": "215",
"percent": "0.4"
},
{
"id": "3",
"points": "500-599",
"total": "5431",
"percent": "9.9"
},
{
"id": "4",
"points": "400-499",
"total": "14097",
"percent": "25.6"
},
{
"id": "5",
"points": "300-399",
"total": "14446",
"percent": "26.2"
},
{
"id": "6",
"points": "200-299",
"total": "9768",
"percent": "17.7"
},
{
"id": "7",
"points": "100-199",
"total": "6562",
"percent": "11.9"
},
{
"id": "8",
"points": " >100",
"total": "4526",
"percent": "8.2"
}
]
},
{
"id": "9",
"year": "2014",
"total": "54025",
"points": [
{
"id": "10",
"points": "600",
"total": "162",
"percent": "0.3"
},
{
"id": "11",
"points": "500-599",
"total": "5088",
"percent": "9.4"
},
{
"id": "12",
"points": "400-499",
"total": "13447",
"percent": "24.9"
},
{
"id": "13",
"points": "300-399",
"total": "14047",
"percent": "26"
},
{
"id": "14",
"points": "200-299",
"total": "9584",
"percent": "17.7"
},
{
"id": "15",
"points": "100-199",
"total": "6926",
"percent": "12.8"
},
{
"id": "16",
"points": " >100",
"total": "4771",
"percent": "8.8"
}
]
},
{
"id": "17",
"year": "2013",
"total": "52767",
"points": [
{
"id": "18",
"points": "600",
"total": "152",
"percent": "0.3"
},
{
"id": "19",
"points": "500-599",
"total": "4813",
"percent": "9.1"
},
{
"id": "20",
"points": "400-499",
"total": "12803",
"percent": "24.3"
},
{
"id": "21",
"points": "300-399",
"total": "13381",
"percent": "25.4"
},
{
"id": "22",
"points": "200-299",
"total": "9566",
"percent": "18.1"
},
{
"id": "23",
"points": "100-199",
"total": "6914",
"percent": "13.1"
},
{
"id": "24",
"points": " >100",
"total": "5138",
"percent": "9.7"
}
]
},
{
"id": "25",
"year": "2012",
"total": "52589",
"points": [
{
"id": "26",
"points": "600",
"total": "165",
"percent": "0.2"
},
{
"id": "27",
"points": "500-599",
"total": "5026",
"percent": "9.6"
},
{
"id": "28",
"points": "400-499",
"total": "12395",
"percent": "23.6"
},
{
"id": "29",
"points": "300-399",
"total": "13170",
"percent": "25"
},
{
"id": "30",
"points": "200-299",
"total": "9588",
"percent": "18.2"
},
{
"id": "31",
"points": "100-199",
"total": "6999",
"percent": "13.3"
},
{
"id": "32",
"points": " >100",
"total": "5276",
"percent": "10"
}
]
},
{
"id": "33",
"year": "2011",
"total": "54341",
"points": [
{
"id": "34",
"points": "600",
"total": "162",
"percent": "0.3"
},
{
"id": "35",
"points": "500-599",
"total": "4863",
"percent": "8.6"
},
{
"id": "36",
"points": "400-499",
"total": "12235",
"percent": "22.5"
},
{
"id": "37",
"points": "300-399",
"total": "13860",
"percent": "18.4"
},
{
"id": "38",
"points": "200-299",
"total": "9966",
"percent": "18.4"
},
{
"id": "39",
"points": "100-199",
"total": "7477",
"percent": "13.8"
},
{
"id": "40",
"points": " >100",
"total": "5928",
"percent": "10.9"
}
]
},
{
"id": "34",
"year": "2010",
"total": "54480",
"points": [
{
"id": "35",
"points": "600",
"total": "136",
"percent": "0.2"
},
{
"id": "36",
"points": "500-599",
"total": "4564",
"percent": "8.4"
},
{
"id": "37",
"points": "400-499",
"total": "11973",
"percent": "22"
},
{
"id": "38",
"points": "300-399",
"total": "13878",
"percent": "25.5"
},
{
"id": "39",
"points": "200-299",
"total": "10391",
"percent": "19.1"
},
{
"id": "40",
"points": "100-199",
"total": "7294",
"percent": "13.4"
},
{
"id": "41",
"points": " >100",
"total": "6244",
"percent": "11.5"
}
]
}
]
}
I am hoping someone can maybe help with controlling the output of the loop.
You haven't showed any code, but I can guess that your problem is something typical in JavaScript:
JavaScript closure inside loops – simple practical example
Check out neurosnap's answer.
http://coffeescript.org/#loops
In CoffeeScript it's even simpler:
for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()
Basically, you need a lambda/IIFE inside the for loop in JavaScript to loop to avoid your problem.