Develop Reference

How parse site after loading javascripts with Java

Hello i need get video url from site with parsing from json. But i can't get video with tag because it creting with javascript.
<script>var player = jwplayer('player-embed');
player.setup({"file": "http://dushanbe.mix.tj/video/2/45/5bafae1306081.mp4", "image": "/img/b/7/42/113989.jpg", "aspectratio": "16:9", "autostart": false, "controls": true, "displaydescription": false, "displaytitle": false, "flashplayer": "/player/jwplayer-7.8.7/jwplayer.flash.swf", "key": "n+94L7vjfQNGEin57ap3glk3iRNum2o7AeOIWw==", "mute": false, "ph": 1, "pid": "mS6Np6yN", "preload": "auto", "primary": "html5", "repeat": false, "stagevideo": false, "stretching": "uniform", "width": "100%"});</script>
How parse site after loading javascripts on Java ?

How do I loop through a javascript Array in a React App that has object and get a count on a property that has a certain value

I have this javascript array that has objects nested with in it.
[{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "stopped",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "stopped",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
},
{
"MonitoringState": "disabled",
"State_Code": 16,
"State_Name": "running",
"EbsOptimized": false,
"EnaSupport": true,
"SourceDestCheck": true,
"SpotInstanceRequestId": "None",
"SriovNetSupport": "None",
"StateReason_Code": "None",
"StateReason_Message": "None"
}
]
I want to loop through this and get the see the number of State_Name that are running and those that are stopped. I know I have 6 running and 2 stopped.
So I want my html to say "There are 4 running and 2 stopped". The object is actually bigger and I am doing this in a React App. I have a number of properties where I want to do the same thing. Just need a good pattern.
What is a good pattern at accomplishing this?

You could do something like this:
const runningCount = records.filter(r => r.State_Name === 'running').length
For stopped you can do:
const stoppedCount = records.filter(r =>r.State_Name === 'stopped').length
Then for your template, just do:
<span>There are {runningCount} running and {stoppedCount} stopped. </span>
The variable records is basically your array.

This is a classic use case for reduce(). You can loop through once counting into an object along the way.
let obj = [{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "running", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "stopped", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "stopped","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }]
let counts = obj.reduce((a, item) => {
a[item.State_Name] = (a[item.State_Name] || (a[item.State_Name] = 0)) + 1
return a
},{})
console.log(counts)

The above answers are good, but I wanted to contribute an answer using the new lifecycle hook in React 16.3. static getDerivedStateFromProps executes following the component's instantiation and also whenever the component receives new props. That way, you can check if any new data the component receive necessitates re-rendering the component.
You return an object to indicate a change in state or null to indicate new props do not require any state updates.
Please click here for more information from the official React documentation.
class MyApp extends React.Component {
constructor() {
super();
this.state = {
Num_Running: 0,
Num_NotRunning: 0
};
}
static getDerivedStateFromProps(nextProps, prevState) {
const results = nextProps.initialData.reduce((accum, item) => ({
Num_Running: item.State_Name === 'running' ? ++accum.Num_Running : accum.Num_Running,
Num_NotRunning: item.State_Name !== 'running' ? ++accum.Num_NotRunning : accum.Num_NotRunning
}), {
Num_Running: 0,
Num_NotRunning: 0
});
if (results.Num_Running !== prevState.Num_Running ||
results.Num_NotRunning !== prevState.Num_NotRunning)
return { ...results };
else
return null;
}
render() {
return <div>There are {this.state.Num_Running} running and {this.state.Num_NotRunning} stopped</div>;
}
}
const arrayOfData = [/* your data */];
ReactDOM.render(
<MyApp initialData={arrayOfData} />,
document.getElementById('root') // <div id="root"></div> defined in HTML
);

I think this will work -:
var r = {stopped:0,running:0};
x.map((i) => {i.State_Name === 'running' ? r.running++ : r.stopped++;});

AmCharts Map Disable Rollover Color on Mouseover

I've checked the documentation but I cannot find it... how can I disable the rollover color on AmCharts Map on mouseover? Basically disable the change of color of map (for example, a state on US map). I don't want any mouseover interactivity or change of color. Thanks.
var map = AmCharts.makeChart("propertiesMap", {
"type": "map",
"listeners": [{
"event": "mouseover",
"method": removeListener
}],
"dragMap": false,
"theme": "light",
"colorSteps": 5,
"mouseEnabled": false,
"selectable": false,
"zoomOnDoubleClick": false,
"dataLoader": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22422.json",
format: "json",
"areas": [{
"mouseEnabled": false
}]
},
"areasSettings": {
"autoZoom": false,
"balloonText": "",
"outlineThickness": 1,
"selectable": false,
},
"valueLegend": {
"right": 10,
"minValue": "Cold",
"maxValue": "Hot"
},
"zoomControl": {
"zoomControlEnabled": false,
"panControlEnabled": false,
"homeButtonEnabled": false
}
});

To disable the rollover color for all states/areas, set the rollOverColor to null in your areasSettings object:
"areasSettings": {
// ...
"rollOverColor": null
},
Demo

From the docs
removeListener(chart, type, handler)
So in your case:
removeListener(myChart, 'mouseover', stateHoverFunction)

Vorlon.js is asking for Socket.io, but it's config is already set to include socket.io

I can see the server, but when I load the app I get a red div across the front that says:
Vorlon.js: please load socket.io before referencing vorlon.js or use includeSocketIO = true in your catalog.json file.
my terminal gives me the following output every time I load the server page:
{
"useSSL": false,
"SSLkey": "cert/server.key",
"SSLcert": "cert/server.crt",
"includeSocketIO": true,
"plugins": [
{ "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername": "interactiveConsole", "enabled": true },
{ "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername": "domExplorer", "enabled": true },
{ "id": "MODERNIZR", "name": "Modernizr", "panel": "bottom", "foldername": "modernizrReport", "enabled": true },
{ "id": "OBJEXPLORER", "name": "Obj. Explorer", "panel": "top", "foldername": "objectExplorer", "enabled": true },
{ "id": "XHRPANEL", "name": "XHR", "panel": "top", "foldername": "xhrPanel", "enabled": true },
{ "id": "NGINSPECTOR", "name": "Ng. Inspector", "panel": "top", "foldername": "ngInspector", "enabled": false },
{ "id": "NETWORK", "name": "Network Monitor", "panel": "top", "foldername": "networkMonitor", "enabled": true },
{ "id": "RESOURCES", "name": "Resources Explorer", "panel": "top", "foldername": "resourcesExplorer", "enabled": true }
]
}
(fourth line down, includeSocketIO is set to true).
Has anyone else had a similar issue (and hopefully been able to fix it)?

It looks like the problem comes from CORS errors. Socket.io doesn't have the right permission to write across domains. To fix the issue so I could open my app on my iPad, I did this:
Make sure the host address that you load the page from and the Vorlon script address are the same. e.g., for me, I am hitting http://mymachine.local/... on my iPad, and I set the Vorlon script URL to http://mymachine.local:1337/vorlon.js in my page. Instead of mymachine.local, this might be your local network IP (192.168.x.x).
I also had to load Vorlon as the first script in my page, before any other libraries.
If it's still not working, open your app in a second browser (I tested in FF with the Vorlon server open in Chrome) and check the console for CORS errors.
Hope this helps.

JSHint: Function conventions

I would like my JSHint to yell at me when I don't follow Crockford's function conventions - i.e.:
"There should be no space between the name of a function and the ( (left parenthesis) of its parameter list. There should be one space between the ) (right parenthesis) and the { (left curly brace) that begins the statement body"
Is there an option to enable this? I thought "white":true would work but it doesn't seem to. I know JSLint will complain about this as well.
My .jshintrc:
{
"white": true,
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"nomen": false,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"sub": true,
"globals": {
"angular": false,
"d3": false
}
}

I think that this may be something best done with jscs. In fact there are presets for Crockford available.
As JSHint moves to version 3, it will no longer be focused on being a style tool. (Read JSHint 3 Plans).