Develop Reference

read the values from the array in which the arrays are

I change the currentHistoryIndex in option in select as click, e.g. 5 to react developers tools I have curentHistoryIndex: 5
state= {
history: [[{ "Name": "name", "Description": "xxx", "X": 18.6355611, "Y": 53.0331258 }], [{ "Name": "name1", "Description": "xxx", "X": 18.6355611, "Y": 53.0331258 }, { "Name": "name3", "Description": "xxxx", "X": 18.6355611, "Y": 53.0331258 }, { "Name": "name4", "Description": "xxx", "X": 18.6355611, "Y": 53.0331258 }, { "Name": "namee", "Description": "xxx", "X": 18.6355611, "Y": 53.0331258 }]],
}
currentHistoryIndex:0
I have a problem displaying this data
for (var i = 0; i < this.state.history[this.state.currentHistoryIndex].length; i++) {
var obj = this.state.history[i][i];
let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
new mapboxgl.Marker()
.setLngLat(myLatlng)
.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<h3>' + obj.Name + '</h3><p>' + obj.Description + '</p>'
))
.addTo(map);
}

How can I extract a key with different values?

I have several same keys and multiple values I just want to parse JSON with keys and values and extract device_id, As you can see all device_id is the same but the value of them is different.
How can I parse.json and have just device_id: values?
My file is like this :
[
{
"id": "c19ca393.e14b1",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": ""
},
{
"id": "a15871bb.7c3b2",
"type": "input-distributer",
"z": "c19ca393.e14b1",
"name": "input-distributer",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"x": 280,
"y": 260,
"wires": [
[
"6548d2cb.45bc1c"
],
[
"7cf8bc7e.204a84"
]
]
},
{
"id": "421da76b.670be8",
"type": "output-distributer",
"z": "c19ca393.e14b1",
"name": "output-distributer",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"x": 620,
"y": 260,
"wires": [
]
},
{
"id": "6548d2cb.45bc1c",
"type": "video-switcher",
"z": "c19ca393.e14b1",
"name": "video-switcher",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"x": 480,
"y": 120,
"wires": [
[
"421da76b.670be8"
]
]
},
{
"id": "7cf8bc7e.204a84",
"type": "audio-switcher",
"z": "c19ca393.e14b1",
"name": "audio-switcher",
"device_id": "fe21abdf-706f-5c7b-adb8-2507e145e820",
"device_name": "nmos-cpp_node_10-20-130-24:6121",
"x": 440,
"y": 360,
"wires": [
[
"421da76b.670be8"
]
]
}
]
If I wanted to grab all the values of the device id, How is it possible?

You can try this for getting device_id values
data.map(element => { // data refers to your array
console.log(element['device_id']);
});
since in first object device_id is not there so it will print undefined and you can apply a check on that.

You can add a check if device_id exists or not and the you can .map it.
Try this:
let arr = [{"id":"c19ca393.e14b1","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a15871bb.7c3b2","type":"input-distributer","z":"c19ca393.e14b1","name":"input-distributer","device_id":"93e71ba7-fb56-5592-a5f6-d855203dd7ae","device_name":"nmos-cpp_node_10-20-130-24:6131","audio_services":"{\"node-input-audio_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"audio_ip_1\":\"1.2.3.4\",\"audio_port_1\":\"1234\"}","video_services":"{\"node-input-video_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"video_ip_1\":\"5.6.7.8\",\"video_port_1\":\"5678\"}","x":280,"y":260,"wires":[["6548d2cb.45bc1c"],["7cf8bc7e.204a84"]]},{"id":"421da76b.670be8","type":"output-distributer","z":"c19ca393.e14b1","name":"output-distributer","device_id":"93e71ba7-fb56-5592-a5f6-d855203dd7ae","device_name":"nmos-cpp_node_10-20-130-24:6131","audio_services":"{\"node-input-audio_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}","video_services":"{\"node-input-video_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}","x":620,"y":260,"wires":[]},{"id":"6548d2cb.45bc1c","type":"video-switcher","z":"c19ca393.e14b1","name":"video-switcher","device_id":"93e71ba7-fb56-5592-a5f6-d855203dd7ae","device_name":"nmos-cpp_node_10-20-130-24:6131","video_senders":"{\"node-input-senders_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"senders_ip_1\":\"9.0.1.2\",\"senders_port_1\":\"9012\"}","video_receivers":"{\"node-input-receivers_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}","x":480,"y":120,"wires":[["421da76b.670be8"]]},{"id":"7cf8bc7e.204a84","type":"audio-switcher","z":"c19ca393.e14b1","name":"audio-switcher","device_id":"fe21abdf-706f-5c7b-adb8-2507e145e820","device_name":"nmos-cpp_node_10-20-130-24:6121","audio_senders":"{\"node-input-senders_services1\":\"7408e1be-a227-5d0a-a22b-294bcf22017c\",\"senders_ip_1\":\"0.0.0.0\",\"senders_port_1\":\"0000\"}","audio_receivers":"{\"node-input-receivers_services1\":\"d08f3a50-41fc-5020-9c6c-175d91891aef\"}","x":440,"y":360,"wires":[["421da76b.670be8"]]}]
let device_ids = arr.filter(o => o.device_id).map(obj => obj.device_id);
console.log(device_ids);

After you opened the file and get the data from it, iterate through array and check if object has property device_id obj.hasOwnProperty("device_id") , if it's present, print it:
// edit after comment ---------
async function getFileContent() {
fs.readFile("flow_demo_1.json", (err, data) => {
if (err) {
console.log(err);
} else {
console.log(data.toString());
return data
}
})
}
// const fileContent = await getFileContent();
// const myObj = JSON.parse(fileContent)
// ---------
const myObj = [{
"id": "c19ca393.e14b1",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": ""
},
{
"id": "a15871bb.7c3b2",
"type": "input-distributer",
"z": "c19ca393.e14b1",
"name": "input-distributer",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"audio_services": "{\"node-input-audio_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"audio_ip_1\":\"1.2.3.4\",\"audio_port_1\":\"1234\"}",
"video_services": "{\"node-input-video_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"video_ip_1\":\"5.6.7.8\",\"video_port_1\":\"5678\"}",
"x": 280,
"y": 260,
"wires": [
[
"6548d2cb.45bc1c"
],
[
"7cf8bc7e.204a84"
]
]
},
{
"id": "421da76b.670be8",
"type": "output-distributer",
"z": "c19ca393.e14b1",
"name": "output-distributer",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"audio_services": "{\"node-input-audio_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}",
"video_services": "{\"node-input-video_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}",
"x": 620,
"y": 260,
"wires": [
]
},
{
"id": "6548d2cb.45bc1c",
"type": "video-switcher",
"z": "c19ca393.e14b1",
"name": "video-switcher",
"device_id": "93e71ba7-fb56-5592-a5f6-d855203dd7ae",
"device_name": "nmos-cpp_node_10-20-130-24:6131",
"video_senders": "{\"node-input-senders_services1\":\"c250498b-52ee-5162-b450-e15905912e8c\",\"senders_ip_1\":\"9.0.1.2\",\"senders_port_1\":\"9012\"}",
"video_receivers": "{\"node-input-receivers_services1\":\"7d010b65-b9d8-5561-a622-189b1c06d3f9\"}",
"x": 480,
"y": 120,
"wires": [
[
"421da76b.670be8"
]
]
},
{
"id": "7cf8bc7e.204a84",
"type": "audio-switcher",
"z": "c19ca393.e14b1",
"name": "audio-switcher",
"device_id": "fe21abdf-706f-5c7b-adb8-2507e145e820",
"device_name": "nmos-cpp_node_10-20-130-24:6121",
"audio_senders": "{\"node-input-senders_services1\":\"7408e1be-a227-5d0a-a22b-294bcf22017c\",\"senders_ip_1\":\"0.0.0.0\",\"senders_port_1\":\"0000\"}",
"audio_receivers": "{\"node-input-receivers_services1\":\"d08f3a50-41fc-5020-9c6c-175d91891aef\"}",
"x": 440,
"y": 360,
"wires": [
[
"421da76b.670be8"
]
]
}
]
for (let obj of myObj) {
if (obj.hasOwnProperty("device_id")) {
console.log("device_id: " + obj.device_id)
}
}

finally found my answer :
var fileContent = fs.readFileSync('flow_demo_1.json', 'utf8');
console.log(fileContent);
const myObj = JSON.parse(fileContent)
for (let obj of myObj) {
if (obj.hasOwnProperty("device_id")) {
console.log("device_id: " + obj.device_id);
}
}
Thanks every one.

How to remove all 'map' properties from my array

From this array:
[{
"map": {
"name": "2",
"y": 2
}
}, {
"map": {
"name": "4",
"y": 17494
}
}, {
"map": {
"name": "3",
"y": 2
}
}, {
"map": {
"name": "1",
"y": 1
}
}]
I want this data structure:
[{
"name": "2",
"y": 2
}, {
"name": "4",
"y": 17494
}, {
"name": "3",
"y": 2
}, {
"name": "1",
"y": 1
}]
How can I do this?

Use JavaScript mapping:
let json = [{
"map": {
"name": "2",
"y": 2
}
}, {
"map": {
"name": "4",
"y": 17494
}
}, {
"map": {
"name": "3",
"y": 2
}
}, {
"map": {
"name": "1",
"y": 1
}
}];
let result = json.map(item => item.map);
result.forEach(i => console.log(i));
Above code prints:
{name: "2", y: 2}
{name: "4", y: 17494}
{name: "3", y: 2}
{name: "1", y: 1}
See:
Array.map

Use Array.prototype.reduce()
let input=[{
"map": {
"name": "2",
"y": 2
}
}, {
"map": {
"name": "4",
"y": 17494
}
}, {
"map": {
"name": "3",
"y": 2
}
}, {
"map": {
"name": "1",
"y": 1
}
}]
let revisedarray=input.reduce((acc,val)=>{
acc.push(val.map);
return acc;
},[])
console.log(revisedarray)
For more info about array reduce you can look at-mdn docs

Hi you can do this via pure js by looping through the array and extracting out the required output. Please check the code below.
var arr = [{ "map": { "name": "2", "y": 2 } }, { "map": { "name": "4", "y": 17494 } }, { "map": { "name": "3", "y": 2 } }, { "map": { "name": "1", "y": 1 } }];
var resultArr = arr.map(function(item) {
return item.map;
})

ES6 Short syntax, here A is original array of objects and A2 is output array of objects
let A2 = A.map(o=>o.map);

let jsonString = your_jsonString;
var blankArr = [];
let result = jsonString.map(item => item.map);
result.forEach(i => blankArr.push(i));
console.log(blankArr);

Applying a method to JavaScript object on the fly

I have a dynamically loaded object for which the print of JSON.stringify() in the console looks like this:
var data = [
{
"attributes": {
"OBJECTID": 1046
},
"geometry": {
"x": -9814734.1764,
"y": 5130578.545900002
}
},
{
"attributes": {
"OBJECTID": 1051
},
"geometry": {
"x": -9814335.3286,
"y": 5130497.9344
}
},
{
"attributes": {
"OBJECTID": 1052
},
"geometry": {
"x": -9814639.1784,
"y": 5130583.1822
}
},
{
"attributes": {
"OBJECTID": 1053
},
"geometry": {
"x": -9814496.7964,
"y": 5130560.822300002
}
}
];
How can I apply .toFixed(2) function to each of X and Y in geometry nodes on the fly?

You need to use the map function:
const formattedData = data.map(d => {
d.geometry.x = parseFloat(d.geometry.x).toFixed(2);
d.geometry.y = parseFloat(d.geometry.y).toFixed(2);
return d;
})
Feel free to change the property name (x -> xFormatted) if you don't wish to override the original data.

Use map
data = data.map( function(s){
s.geometry.x = s.geometry.x.toFixed(2);
s.geometry.y = s.geometry.y.toFixed(2);
return s;
})
Edit
Or with forEach
data.forEach( function(s){
s.geometry.x = s.geometry.x.toFixed(2);
s.geometry.y = s.geometry.y.toFixed(2);
})

Try this
//Your Data
var data = [
{
"attributes": {
"OBJECTID": 1046
},
"geometry": {
"x": -9814734.1764,
"y": 5130578.545900002
}
},
{
"attributes": {
"OBJECTID": 1051
},
"geometry": {
"x": -9814335.3286,
"y": 5130497.9344
}
},
{
"attributes": {
"OBJECTID": 1052
},
"geometry": {
"x": -9814639.1784,
"y": 5130583.1822
}
},
{
"attributes": {
"OBJECTID": 1053
},
"geometry": {
"x": -9814496.7964,
"y": 5130560.822300002
}
}
];
//Updating data
data.forEach(function(item,index){
item["geometry"]["x"]=item["geometry"]["x"].toFixed(2);
item["geometry"]["y"]=item["geometry"]["y"].toFixed(2);
})
console.log(JSON.stringify(data))

Just iterate using the forEach function. Also make sure to parse the value using parseFloat before calling the toFixed function.
data.forEach(entry => {
entry.geometry.x = parseFloat(entry.geometry.x).toFixed(2);
entry.geometry.y = parseFloat(entry.geometry.y).toFixed(2);
});

How to push json data in javascript?

I have a json file, the file have data like this format :
{
"rigidBodies": [
{
"name": "ball1.png", "imagePath": "ball1.png", "origin": {"x": 0, "y": 0},
"polygons": [
[
{"x": 0.16999998688697815, "y": 0.5724999904632568},
{"x": 0.16749995946884155, "y": 0.5324999690055847},
{"x": 0.16999998688697815, "y": 0.45250001549720764}
],
[
{"x": 0.16999998688697815, "y": 0.45250001549720764},
{"x": 0.16749995946884155, "y": 0.375},
{"x": 0.2199999988079071, "y": 0.3725000023841858}
]
]
}
]
}
I want to push the data in an Array so I have tried this way and it says error,
var poly = new Array();
// note : parsing json
$.getJSON('my_assets/addPhysics/testPhysics.json', function(data) {
//do stuff with your data here
$.each(data, function(i, item) {
// for(var i=0;i<item[0].length;i++){
poly.push(item[0][i].x,item[0][i].y);
//}
});
});

data is an object, the array you want to loop through is in the polygons property inside the rigidBodies array. You need to do:
var data = {
"rigidBodies": [{
"name": "ball1.png",
"imagePath": "ball1.png",
"origin": {
"x": 0,
"y": 0
},
"polygons": [
[{
"x": 0.16999998688697815,
"y": 0.5724999904632568
}, {
"x": 0.16749995946884155,
"y": 0.5324999690055847
}, {
"x": 0.16999998688697815,
"y": 0.45250001549720764
}],
[{
"x": 0.16999998688697815,
"y": 0.45250001549720764
}, {
"x": 0.16749995946884155,
"y": 0.375
}, {
"x": 0.2199999988079071,
"y": 0.3725000023841858
}]
]
}]
}
var poly = [];
$.each(data.rigidBodies, function(i, body) {
$.each(body.polygons, function(j, polygon) {
$.each(polygon, function(k, coords) {
poly.push([coords.x, coords.y]);
});
});
});
document.getElementById("output").innerHTML = JSON.stringify(poly);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

You should try this
poly.push([item[0][i].x,item[0][i].y]);
So poly[0][0] is X
and poly [0][1] is Y