I want to load a JSON into a timemap, and my code seems to be missing something to configure the JSON correctly. JSON format below
{"results": [{"Lat": "34.0453113", "text": "Historic Core DTLA",
"Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"},
{"Lat": "34.0444899", "text": "Spring # 7", "Lon": "-118.2523059",
"bicyclistCount": "16", "date": "2014-10-26"}]}
This link contains the html file based mainly on a timemap example. It opens up the timeline and map, but the data does not load. Also the map won't zoom in and out, though I want to solve the JSON load issue first. Do you have a suggestion on what I can change? Adding the JavaScript code below. Thanks, Patty
The JavaScript code:
var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
$(function() {
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
options: {
eventIconPath: "../images/"
},
datasets: [
{
title: "JSON String Dataset",
type: "json",
options: {
// json file
url: "output.json", <!--this file sits in the same folder as the HTML-->
error: errFn,
}
}
],
bandIntervals: [
Timeline.DateTime.DAY,
Timeline.DateTime.WEEK
]
});
<!--start loading data-->
function transformData(data) {
var text, Lat, Lon, bicyclistCount, date; <!--is this how the data is called?-->
var newData = {
"title" : text,
"start" : date,
"options" : {
"description" : bicyclistCount
}
};
newData["point"] = {
"lat" : Lat,
"lon" : Lon,
};
}
});
<!--end loading data-->
If you don't want to change json then define custom loader and configure Timemap to use it.
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["results"]
}
loader.transform = function(data) {
return {
"title" : data.text,
"start" : data.date,
"options" : {
"description" : data.bicyclistCount
},
"point": {
"lat" : data.Lat,
"lon" : data.Lon,
}
};
};
return loader;
};
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
options: {
eventIconPath: "../images/"
},
datasets: [
{
title: "JSON String Dataset",
type: "custom",
options: {
// json file
url: "output.json"
}
}
],
bandIntervals: [
Timeline.DateTime.DAY,
Timeline.DateTime.WEEK
]
});
});
I see a javascript error on your page: Uncaught TypeError: undefined is not a function on this line: data.forEach(function(item)
data is an Object, not an Array
Object
results: Array[10]
Change your JSON from:
{"results": [{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring # 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]}
To:
[{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring # 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]
(make it an array not an object with an array as its "results" property)
Change your JSON Format to:
[
{
"title":"example",
"start":"1968-10-12",
"end": "1968-11-12",
}
]
Related
I am trying to get output of log4js in JSON format so I can easily trace it.
Is there any way that we have to set in configuration.json so output produced by log4js will be in JSON format?
Currently I am using following config.
{
"appenders": [
{
"category": "XXXXX",
"type": "dateFile",
"filename": "XXXXXXXX",
"pattern": "-from-MM-dd",
"layout": {
"type": "messagePassThrough"
}
},
{
"category": "XXXXXXXXX",
"type": "dateFile",
"filename": "XXXXXXXX",
"pattern": "-from-MM-dd",
"layout": {
"type": "messagePassThrough"
}
}
],
"levels": {
"XXXXConfig": "INFO",
"XXXXXjectConfig" : "INFO"
}
}
and I got output is in following format :
DEBUG: 1458562784032 : 2016-03-21T12:19:44.4444+00:00 : Data in request: : {
"action": "XXXXXXX",
"user": {
"username": "XXXX",
"id" : XXXX,
"pos" : XXXX
},
"version": 111
}
instead I want it in (Something like following structure) :
{"id" : "1458562784032", "time" : "2016-03-21T12:19:44.4444+00:00", "message" : "Data in request:", "data" : "{
"action": "XXXXXXX",
"user": {
"username": "XXXX",
"id" : XXXX,
"pos: : XXXX
},
"version": 111
}" }
May be there is something I missing in config.
Thanks for helping.
There are two ways to implement this issue now, you can add your own layouts or pattern format.
Below is the sample code of adding your own layouts with JSON format
const log4js = require('log4js');
log4js.addLayout('json', function(config) {
return function(logEvent) { return JSON.stringify(logEvent) + config.separator; }
});
log4js.configure({
appenders: {
out: { type: 'stdout', layout: { type: 'json', separator: ',' } }
},
categories: {
default: { appenders: ['out'], level: 'info' }
}
});
const logger = log4js.getLogger('json-test');
logger.info('this is just a test');
We can use bunyan for same purpose which logs your console log in JSON format.
Here is the npm link for node : https://www.npmjs.com/package/bunyan.
Also even if you want to use log4js then create your own pattern and write log file into JSON format.
Thanks.
I'm trying to create a Extjs tree with JSON data. The data I want to load into the tree contains a folder structure. But when I trie to load the data into the tree, it doesn't show anything.
I have checked the json code here (JSONLint) on errors but everythin looks fine. Which would say that the problem probably is in the extjs part.
I have no idea how to get it works.
I have created a JSON-object like this:
{
"folders": [
{
"name": "Function",
"id": "workspace://SpacesStore/000-000-000",
"folders": [
{
"name": "Evaluation reports",
"id": "workspace://SpacesStore/00-00-4949-9caf-6655fg"
},
{
"name": "Function Reports",
"id": "workspace://SpacesStore/554gg-563-sd555-872e-0098hhjf"
},
{
"name": "Training(POP)",
"id": "workspace://SpacesStore/4334g-67hj-4357-ba96-4343fhj343"
}
]
},
{
"name": "Application data",
"id": "workspace://SpacesStore/3434gg-a761-48a2-83fa-3434f454hu",
"folders": [
{
"name": "Application letters",
"id": "workspace://SpacesStore/23232ff-c95f-4999-sdsd556-00886ggh7765"
}
]
}
]
}
This is the Extjs part where I want to load the JSON data:
initComponent: function() {
// declare a new store and load tree data
this.store = new Ext.data.TreeStore({
// set params
proxy: {
type: 'ajax',
reader: 'json',
url: 'http://localhost:8080/testApp/rest/folder/1'
}
});
this.items = [{
flex: 1
}];
this.callParent();
}
You didn't tell the reader what property to read from:
reader: {
type: 'json',
rootProperty: 'folders'
}
i have the following Problem. Sorry for my bad english that way.
I want to read a jsonfile and count the Number of Persons in it.
This result i will write to an variable.This variable is connected to the TileContainer. So when i write an new entry in my Json File i want that the TileContainer number is increased to.
Here my Code from my Company.json File:
{
"mitarbeiter": [
{ "Lastname": "Mustermann",
"Firstname": "Max",
"icon": "sap-icon://globe",
"adress": "Essen",
"geschlecht": "männlich",
"plz": "42222",
"street": "Viehoferplatz 11",
"jobinfo": "Softwareentwickler"
},
{ "Lastname": "Fischer",
"Firstname": "Elke",
"icon": "sap-icon://globe",
"adress": "Hamburg",
"geschlecht": "weiblich",
"plz": "31441",
"street": "Am Fischmarkt 12",
"jobinfo": "Verwaltungsassistentin"
},
{ "Lastname": "Mustermann",
"Firstname": "Heike",
"icon": "sap-icon://globe",
"adress": "Essen",
"geschlecht": "weiblich",
"plz": "42222",
"street": "Viehoferplatz 11",
"jobinfo": "Vorstandsvorsitzende"
}
]
}
on my controller.js
onInit: function() {
this.getView().addDelegate({onBeforeShow: function(evt) {
if (this.direction != "back") {
var model = new sap.ui.model.json.JSONModel();
model.loadData("JsonModels/Company.json");
alert(model.getJSON());
var XYZ;
var jsonModel =
{
"Tiles":[
{"Tile":
{ id : "idModelTile1",
title : "Mitarbeiter",
info: "Mitarbeiterdaten",
icon:"sap-icon://company-view",
activeIcon:"inbox",
number: XYZ,
appto: "idListPage"
//numberUnit: "positions"
},
}, ......
I want that the variable XYZ gets the Length Value, bevor the TileContainer is rendered. So the Number of Company-Employess is given on the Selectionscreen View.
Hope some one can help me. I make some implementations with jquery and so but nothing really work fine.
Dear,
Christian
When i add
alert(model.getProperty("/mitarbeiter/length"));
i get the alert message "undefined"...
Since the length property of an array can be read, you could simply use
var XYZ = model.getProperty("/mitarbeiter/length");
EDIT: here's a code example for the comment I gave below
onInit: function() {
jQuery.ajax({
url: "JsonModels/Company.json",
dataType: "json",
success: function(data, textStatus, jqXHR) {
var mitarbeiterCount = data.length;
var oTileModel = new sap.ui.model.json.JSONModel();
oTileModel.setData({
tiles :[{
tile : {
id : "idModelTile1",
title : "Mitarbeiter",
info : "Mitarbeiterdaten",
icon :"sap-icon://company-view",
activeIcon:"inbox",
number : mitarbeiterCount,
appto : "idListPage"
},
}]
});
sap.ui.getCore().setModel(oTileModel);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Oh no, an error occurred");
}
});
}
In your view, if you now bind your tile's number property, it should automagically work:
var oTileTemplate = new sap.m.StandardTile({
icon : "{icon}",
number : "{number}",
numberUnit: "mitarbeiter",
title : "{title}",
info : "{info}"
});
var oTileContainer = new sap.m.TileContainer().bindAggregation("tiles", "/", oTileTemplate);
//Etc...
I'm have a little trouble with some jQuery I have been trying to put together today.
Basically what I am trying to achieve is to dynamically have prices inserted into a price button on my page by reading from a JSON feed.
The idea is that there is an empty span that will contain the price. I have given all of the price spans the class .getPriceNew. Each span also has an id which is equal to the SKU number for the item like this <span class="getPriceNew" id="123456"></span>.
The mechanic is that for each span that has the class .getPriceNew the JSON will be queried for the information with the SKU id used as part of the query string.
Here is an example of the code i have tried
jQuery
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
return(data.Variants[0].Price);
});
$(this).html("€"+priceNew);
})
HTML
<span class="getPriceNew" id="123456"></span>
<span class="getPriceNew" id="789123"></span>
<span class="getPriceNew" id="456789"></span>
<span class="getPriceNew" id="654321"></span>
JSON Example
This is what a single item from the JSON feed would look like - I have filtered it a little
/api/MyApi.svc/GetProductBySku/123456
Updated with valid JSON
{
"Age": {
"Description": "Age 18+",
"Thumbnail": "http://someurl.com/productImages/assets/img//icon18.gif"
},
"Barcode": {
"Barcode": "5026555408684"
},
"Description": "HTML",
"Id": 12214,
"Packshots": [
"http://someurl.com/productImages/914383/1min.jpg",
"http://someurl.com/productImages/914383/2med.jpg",
"http://someurl.com/productImages/914383/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Format",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1364252400000+0100)/",
"Screenshots": [],
"Title": "Product Title",
"Variants": [
{
"Id": 22488,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 49.97,
"Sku": 914383,
"Type": {
"Description": "Pre-Order"
}
}
],
"Vendor": {
"Description": "Take Two Interactive Software"
},
"VideoHTML": "HTML",
"status": {
"Response": "product found",
"Success": true
}
}
I would love some help on this as I am really scratching my newbie head at this stage. I have managed to have console.log output the prices to the log but when I try and insert them back into the spans all I get is [object] [Object].
You are doing
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
return(data.Variants[0].Price);
});
$(this).html("€"+priceNew);
})
getJSON returns a jqXHR object, which is not what you need. Try this:
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
// Save a refference to this span.
var thisSpan = $(this);
$.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
// Request complete, NOW we can use the data we got!
thisSpan.html("€"+data.Variants[0].Price);
});
})
The callback is where you want to use the data you get from your AJAX calls. All AJAX methods ($.ajax, $.get, $.post, $.getJSON, etc) will return a jqXHR object.
I think your javascript code is correct but your Json output has two errors:
1: "Description":"Some HTML Description here, <- you forgot the closing quote
2: "ID":0}, <- delete the closing brace
So your Json will result like this:
{
"Age": {
"Description": "Age 18+",
"Thumbnail": "http://url.com/image.gif"
},
"Barcode": {
"Barcode": "4876416541647"
},
"Description": "Some HTML Description here",
"Id": 12214,
"Packshots": [
"http: //url.com/productImages/914383/1min.jpg",
"http: //http: //url.com/2med.jpg",
"http: //http: //url.com/3max.jpg"
],
"ID": 0,
"Publisher": {
"Description": null
},
"Release": "/Date(1364252400000+0100)/",
"Screenshots": [],
"Title": "Titleoftheproduct",
"Variants": [
{
"Id": 22488,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 49.97,
"Sku": 914383,
"Type": {
"Description": "Pre-Order"
}
}
],
"Vendor": {
"Description": "Vendorname"
},
"VideoHTML": "<iframewidth="725"height="408"src="http: //www.youtube.com/embed/videoseries?list=PLofwA47XDv2_KnfUY52_8mlWg0iUEv8ci"frameborder="0"allowfullscreen></iframe>",
"status": {
"Response": "productfound",
"Success": true
} }
now your code
data.Variants[0].Price
will return 49.97
to validate Json you can paste it into http://jsonlint.com/ i think is very useful
Hope this helps
I am getting a JSON in response from server:
{
"width": "765",
"height": "990",
"srcPath": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_MERGED_/1273.pdf",
"coverPage": "",
"documents": [
{
"index": "1",
"text": "Archiving Microsoft® Office SharePoint® Server 2007 Data with the Hitachi Content Archive Platform and Hitachi Data Discovery for Microsoft SharePoint",
"type": "doc",
"id": "HDS_054227~201106290029",
"children": [
{
"text": "Page 1",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_1.png"
},
{
"text": "Page 2",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_2.png"
}
]
},
{
"index": "11",
"text": "Brocade FCoE Enabling Server I/O Consolidation",
"type": "doc",
"id": "HDS_053732~201105261741",
"children": [
{
"text": "Page 1",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_053732~201105261741/image_1.png"
},
{
"text": "Page 2",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_053732~201105261741/image_2.png"
}
]
}
]
}
And I want to get pagelocation of the children.
Can anyone tell me how to do this?
Hi
i also want to get indexes from this and then want to get pagelocations of that particular children. Can you tell me how would i do that?
And also when i when i am getting indexes array it is returning me ,, only and not the index nos.
I am using following code for that :
indexes=response.documents.map(function(e){ return e.children.index; })
Thanks & Regards
If you're interested in simply retrieving all the page locations, you can do it using filter:
var locations = [];
json.documents.forEach(function(e,i) {
e.children.forEach(function(e2,i2) {
locations.push(e2.pageLocation);
)}
});
// returns flat array like [item1,item2,item3,item4]
You can get an array of arrays using map:
var locations = [];
var locations = json.documents.map(function(e) {
return e.children.map(function(e2) {
return e2.pageLocation;
});
});
// returns 2-dimensional array like [[item1,item2],[item1,item2]]
Your json response is an appropriate javascript object So you can access all elements of the object like you do as in back end.
here, you have an array of object of the type documents and each document object has array of objects of the type children. so
syntax would be
myjson.documents[0].children[0].pagelocation
( = http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_1.png)
will give you the very first page location..
and so on