file snapshot_report_js.js:
require([
"dojo/dom",
"dojo/json",
"dojo/store/Memory",
"dijit/tree/ObjectStoreModel",
"dijit/Tree",
"dojo/text!http://localhost:8080/dojo/json_data/snapshot.json",
"dojo/domReady!",
"dojo/_base/json"
], function(dom, json, Memory, ObjectStoreModel, Tree, small){
var stringfied_content = JSON.stringify(small)
var json_parsed_data = JSON.parse(stringfied_content, true)
var json_data = dojo.toJson(json_parsed_data);
// set up the store to get the tree data
var json_store = new Memory({
data: [ json_data ],
getChildren: function(object){
return object.children || [];
}
});
// Create the model
var snapshot_treeModel = new ObjectStoreModel({
store: json_store,
query: {id: 'snapshot'}
});
var snapshot_tree = new dijit.Tree({
model: snapshot_treeModel
}, 'div_snapshot_tree');
snapshot_tree.startup();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snapshot</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="js/snapshot_report_js.js"></script>
</head>
<body class="claro">
<div id="div_snapshot_tree"></div>
</body>
</html>
JSON file:
{
"snapshot_metadata": {
"report_end_at": "2017-10-11 02:03:36",
"environment_name": "DVINST",
"report_start_at": "2017-10-11 01:55:42"
},
"versions": [
{
"id": "version_001",
"instances": [
{
"instance_name": "instance1",
"instance_create_date": "2017-09-18 00:17:52",
"connected_site_count": 4,
"admin_server": "t3://tserver:18300",
"instance_id": 2411,
"instance_type": "OSVC",
"instance_created_by": "None",
"site_capacity": 2,
"sites": [
{
"site_db_id": 395,
"site_name": "zzzz_178",
"site_users": "uc1,uc2,uc3",
"site_id": 89492,
"site_owner": "owner1",
"site_db_name": "site_server2"
},
{
"site_db_id": 395,
"site_name": "site2",
"site_users": "u1, u2, u3",
"site_id": 90447,
"site_owner": "u2",
"site_db_name": "site_server3"
}
]
}
]
}
],
"servers": [
{
"status": null,
"server_id": 13,
"server_name": "db1",
"server_type": "database",
"mount_points": [],
"sites": [],
"db_connections_count": 6,
"health": null,
"admin_servers": null,
"db_sites_connected_count": null
}
]
}
Error on console:
dojo.js:8 Uncaught Error: dijit.tree.ObjectStoreModel: root query
returned 0 items, but must return exactly one at Object.
(ObjectStoreModel.js.uncompressed.js:86) at dojo.js:8 at when
(dojo.js:8) at Object.getRoot
(ObjectStoreModel.js.uncompressed.js:82) at Object._load
(Tree.js.uncompressed.js:897) at Object.postCreate
(Tree.js.uncompressed.js:844) at Object.create
(_WidgetBase.js.uncompressed.js:453) at Object.postscript
(_WidgetBase.js.uncompressed.js:366) at new (dojo.js:8)
at snapshot_report_js.js:178
I don't see anything wrong here, can anybody help?
At first glance your ObjectStoreModel is trying to find root object for tree and as you specified it should have property id equals to snapshot; nothing in your JSON is matching that query.
Secondly, JSON data should bring tree-structured content while your JSON is unstructured; see ObjectStoreModel example how tree data looks like. If you have custom data structure then you need to transform it to be consumed by tree widget thru its model.
Related
I'm trying to create a D3 Force-Directed Graph variant I found here https://github.com/vasturiano/3d-force-graph using JSON data on 30,000+ Steam Games.
I'd like to link games by their first 'steamspy_tags' which requires converting this data to nodes and links like so
{ "nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1}],
"links": [
{"source": "Napoleon", "target": "Myriel", "value": 1},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
Is there an easy way to convert raw JSON to node and link data to format it for the graph?
The data is structured like so:
[
{
"appid": 10,
"name": "Counter-Strike",
"developer": "Valve",
"categories": "Multi-player;Online Multi-Player;Local Multi-Player;Valve Anti-Cheat enabled",
"genres": "Action",
"steamspy_tags": "Action;FPS;Multiplayer"
},
{
"appid": 20,
"name": "Team Fortress Classic",
"developer": "Valve",
"categories": "Multi-player;Online Multi-Player;Local Multi-Player;Valve Anti-Cheat enabled",
"genres": "Action",
"steamspy_tags": "Action;FPS;Multiplayer"
},
The graph code itself is as follows:
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
<script src="//unpkg.com/3d-force-graph"></script>
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<script type="module">
import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()(elem)
.jsonUrl('../datasets/developers/valve.json')
.nodeAutoColorBy('maintag')
.nodeVal('PosRat')
.backgroundColor('#171717')
.cooldownTicks(100)
.height(window.innerHeight - 60)
.nodeLabel(node => `${node.title}: ${node.release_date}: ${node.maintag}`)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => window.open(`https://store.steampowered.com/app/${node.id}`, '_blank'));
const bloomPass = new UnrealBloomPass();
bloomPass.strength = 1.0;
bloomPass.radius = 0.3;
bloomPass.threshold = 0.25;
Graph.postProcessingComposer().addPass(bloomPass);
Graph.onEngineStop(() => Graph.zoomToFit(400));
</script>
</body>
i want to retrieve some array inside an array but i dont know how, please read my explanation first
here is my json response
{
"Value": [
{
"id": "5ff97d740e788778dd66ee25",
"id_order": "ORD-434183",
"nama_pelanggan": "Herman",
"total": 80000.0,
"jumlah_item": 4.0,
"cart": [
{
"id_cart": "CART-112010",
"nama_produk": "Ayam Bakar",
"jumlah": 4.0,
"harga": 20000.0,
"subtotal": 80000.0,
"notes": "ga ada"
}
],
"admin_no": "ADM-431525",
"admin_name": "Admin",
"created_at": "2021-01-09 16:55:00",
"updated_at": "2021-01-09 16:55:00"
}
],
"Status": true,
"Messages": [
{
"Type": 200,
"Title": "TotalRows",
"Message": "1"
}
]}
as you can see the value of "value" is an array and in that array also have an array "cart"
i want to retrieve this array "cart" and put it in a table
here is how i retrieve the response using vue js Mapping an Array to Elements with v-for
var vm = new Vue({
el: '#app',
data: {
list: {
items: [],
},
}
var formData = new FormData();
formData.append('filterparams', JSON.stringify(filters));
formData.append('display', JSON.stringify(_self.list.config.display));
formData.append('auth', sessionStorage.getItem("token"));
_self.$http.post(hostapi + 'order/GetByParamsHistory', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
var obj = response.data;
_self.list.items = obj.Value; // the value from array "Value"
here is the table html code
and now I don't know how to insert an existing array in the array into the html table
You can access the array on the basis of the array index.
Suppose, if list contains the json response's value field then you can access it like.
list['0'].cart.
I'm using Google Embed API to show data from google analytics visually.
I was trying to display only a specific country to show users from each of its regions.
I create a "DataChart" which has a "query" and "chart" object. In the chart object, you specify a type of chart, and some extra options.
If I choose "GEO", then it will use the "Geocoding" api, as I've understood it.
I am not able to show the country (Sweden) with its regions however, I don't know what to specify in the chart "options" object.
var location = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': viewId,
'start-date': '90daysAgo',
'end-date': 'today',
'metrics': 'ga:users',
'sort': '-ga:users',
'dimensions': 'ga:region',
'max-results': 10
},
chart: {
'container': 'location',
'type': 'GEO',
'options': {
region: 150, // <-- Europe
country: 'SE', // <-- just guessing
}
}
});
This shows the whole world. If I remove "country", it shows Europe, with the top part cropped away. So I haven't specified "country" in the correct way (I am only guessing since there is no info).
The only info I can find on the GEO chart is here Visualization: GeoChart, but it's not specific for the Embed API.
So does anyone have a solution for this case, and is there info on different properties for the chart object? ( For the query object, there is Dimensions & Metrics Explorer )
Update:
The main question was solved with a below answer:
'options': {
region: 'SE',
resolution: 'provinces'
}
, but the data is not displayed in the regions, so if you have any clues around that, you could perhaps mention it as a comment.
Here is part of the data response from the query (with regions):
"dataTable": {
"cols": [
{
"id": "ga:region",
"label": "ga:region",
"type": "string"
},
{
"id": "ga:users",
"label": "ga:users",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Stockholm County"
},
{
"v": "15"
}
]
},
{
"c": [
{
"v": "Vastra Gotaland County"
},
{
"v": "6"
}
]
},
here are the only configuration options for the GeoChart that I'm aware of...
to display only sweden...
var options = {
region: 'SE'
};
(remove the country option)
see following working snippet...
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
]);
var options = {
region: 'SE',
resolution: 'provinces'
};
var chart = new google.visualization.GeoChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I'm trying to display JSON data on my webpage by using the v-for function in Vue.js and Axios to get the data. Below is my code and an example of the JSON data i'm trying to use.
I have kept the JSON data URL out on purpose as it's private, which is why i've provided an example of the data structure.
I can print the entire data set to my page, as it appears below but if i use my code below to print specific parts of data, like the id or name, that's when i get nothing on the page.
<div id="root">
<p v-for="item in items">{{ item.name }}</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
items: []
},
mounted() {
axios.get("...")
.then(response => {this.items = response.data.data})
}
});
</script>
JSON data example:
json
{
"current_page": 1,
"data": [
{
"id": "83",
"name": "Name1",
},
{
"id": "78",
"name": "Name2",
},
{
"id": "720",
"name": "Name3",
},
{
"id": "707",
"name": "Name4",
},
{
"id": "708",
"name": "Name5",
}
],
"from": 1,
"prev_page_url": null,
"to": 20,
"total": 42
}
looking at the code everything looks ok, but i have an example in the application i am working on and i've noticed that your items array should contain response.data.data.data wich is verbose but you can work on that later
making first attempt to master Ember.js atm. I'm trying to make a simple CMS, but for some reason I have a problem with getting any data from json displayed. I've already switched from Fixture to RESTAdapter, but I am still stuck with
Error: assertion failed: Your server returned a hash with the key timestamp but you have no mapping for it.
Here's my js code:
App.Store = DS.Store.extend(
{
revision:12,
adapter: 'DS.RESTAdapter'
}
);
App.Menucategory = DS.Model.extend({
timestamp: DS.attr('number'),
status: DS.attr('string')
});
App.MenucategoryRoute = Ember.Route.extend({
model: function() {
return App.Menucategory.find();
}
});
DS.RESTAdapter.reopen({
url: <my url>
});
DS.RESTAdapter.configure("plurals", {
menucategory: "menucategory"
});
Trying to access it with:
<script type="text/x-handlebars" id="menucategory">
{{#each model}}
{{data}}
{{/each}}
</script>
My json structure:
{
"timestamp": 1366106783,
"status": "OK",
"data": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}]}
Thank you in advance for any help you can provide.
By default the RESTAdapter expects your API to be in a specific format, which your API doesn't conform to, if you can modify your API, you need to get it to return in this format, otherwise you'll need to customize the adapter.
Expected Format (based on your JSON):
{
"menucategory": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}
],
"meta": {
"timestamp": 1366106783,
"status": "OK",
}
}