First time poster, thanks for the attention.
Using web api to generate object to be consumed by fusioncharts (Multiseries). Object is produced as array of 2 classes (ChartCategories and ChartSeries) output seems fine and is retrieved in angular controller as data. yet after building up $scope.categories and $scope.dataset using data, I am unable to generate the chart with error 'No data to display'.
Partial Html template for chart:
<div id = "Div1">
<fusioncharts
width="400"
height="200"
type="mscolumn2d"
chart="{{attrs}}"
categories="{{categories}}"
dataset="{{dataset}}"
></fusioncharts>
</div>
data retrieved from web api: (copied + pasted)
[
[
{
"category": [
{
"label": "7/18/2014 9:30:01 AM"
},
{
"label": "7/18/2014 9:40:00 AM"
},
{
"label": "7/18/2014 9:50:00 AM"
}
]
},
null,
null
],
[
null,
{
"seriesname": "Free_Memory",
"renderas": "Line",
"data": [
{
"value": "6632"
},
{
"value": "5136"
},
{
"value": "6376"
}
]
},
{
"seriesname": "Page_Life_Exp",
"renderas": "Line",
"data": [
{
"value": "48859"
},
{
"value": "49458"
},
{
"value": "50057"
}
]
}
]
]
and in angular, I set the $scope.categories and $scope.dataset like so: $scope.attr is hard coded for the time being.
$scope.categories = data[0][0];
$scope.dataset = data[1][1];
What is needed in order to generate the graph?
Refer to http://jsfiddle.net/ayanonly1/yh1cvjqw/
I think following changes will make the chart live.
$scope.categories = [data[0][0]];
$scope.dataset = data[1].slice(1);
Related
I created JsonInput, which sends a json object to the input SimpleForm, however, a modified version of it gets into the Data Provider.
that's what is sent to the input:
json: {
"FunctionalGroup": [
{
"uaIDref": [
"2104"
],
"_Name": "Текущие параметры",
"_ID": "33"
},
{
"uaIDref": [
"2100"
],
"_Name": "Текущие параметры пониженной точности",
"_ID": "34"
},
],
"_Name": "Прибор 1",
"_ID": "32"
}
that's what came to the server:
json: {
"FunctionalGroup": [
{
"uaIDref": [
"2104"
],
"_Name": "Текущие параметры",
"_ID": "33"
},
{
"uaIDref": [
"2100"
],
"_Name": "Текущие параметры пониженной точности",
"_ID": "34"
}
],
"FunctionalGroupIds": "",
"_Name": "Прибор 1",
"_ID": "32"
},
after a response from the server with this object, this is what came in the field:
json: {
FunctionalGroup: [
{
uaIDref: [
'2104'
]
},
{
uaIDref: [
'2100'
]
}
],
FunctionalGroupIds: ''
}
what kind of magic is this?
I did some tests. When I converted the object to a string, the correct json was sent to the server, however, in the field after the server responded, the modified object was displayed again.
I found out that the conversion is related to redux.js, but what exactly happens is not understood.
Please give any comments on this.
How can I make save json?
I want to print out JSON images as a variable.
This is my local JSON file (JsonData.json):
{
"appetizer": [
{
"num": "appetizer1",
"name": "salad",
"condition": [ "1", "2" ],
"image": "./appetizer/salad.png"
},
{
"num": "appetizer2",
"name": "soup",
"condition": [ "2", "3" ],
"image": "./appetizer/soup.png"
},
…
],
"main": [
{
"num": "main1",
"name": "beef",
"condition": [ "1" ],
"image": "./main/beef.png"
},
{
"num": "main2",
"name": "fish",
"condition": [ "2", "3" ],
"image": "./main/fish.png"
},
…
]
}
I filtered the name when condition="2". (salad,soup,fish)
This is the code for filtering name:
const newArray1 = [...JsonData["apptizer"], ...JsonData["main"]];
const JsonResult = newArray1.filter(item => {
if(item.condition.indexOf("2") !== -1) return item.name;
});
AND I want to get the image when condition="2".
How can I get them? And How can I print out them?
Do I have to use base64? If so, Can you tell me how to use it?
I saw the explanation, but I can't understand it.
And I imported JSON file this way (I've been correctly using it):
var JsonData = require('./JsonData.json');
You can use below code:
let mainObject = JSON.parse(JSON.stringify(data))
let allKeys = Object.keys(mainObject)
let finalObject = []
allKeys.map((value, index) => {
let array = mainObject[value]
array.map((aryObject, aryIndex) => {
let condition = aryObject['condition']
if (condition.includes('2')) {
finalObject.push(aryObject)
}
})
})
alert(JSON.stringify(finalObject))
You can import data in top of screen:
import { data } from './data';
You can add below text in data.js:
export const data = {
"appetizer": [
{
"num": "appetizer1",
"name": "salad",
"condition": ["1"],
"image": "./appetizer/salad.png"
},
{
"num": "appetizer2222",
"name": "soup",
"condition": ["2", "3"],
"image": "./appetizer/soup.png"
},
],
"main": [
{
"num": "main1",
"name": "beef",
"condition": ["1"],
"image": "./main/beef.png"
},
{
"num": "main2",
"name": "fish",
"condition": ["21", "3"],
"image": "./main/fish.png"
},
]
}
You can use Object#values to get the arrays corresponding to appetizer and main and then Array#flat to extract the nested objects into a transformed array. Then use the Array#filter (which you are already using) to filter out only the required objects based on your condition and then Array#map to get the name and image values out of every filtered object into an array of objects.
Please consider following snippts
const jsonData = {"appetizer":[{"num":"appetizer1","name":"salad","condition":["1","2"],"image":"./appetizer/salad.png"},{"num":"appetizer2","name":"soup","condition":["2","3"],"image":"./appetizer/soup.png"}],"main":[{"num":"main1","name":"beef","condition":["1"],"image":"./main/beef.png"},{"num":"main2","name":"fish","condition":["2","3"],"image":"./main/fish.png"}]};
const filteredValues = Object.values(jsonData)
.flat()
.filter(o => o.condition.includes('2'))
.map(({name, image}) => ({ name, image }));
console.log(filteredValues);
The output of the above code will be an array of objects having the following structure
[{
"name": SOME_NAME,
"image": SOME_PATH
},
{
"name": SOME_NAME,
"image": SOME_PATH
},
...
]
You can use the above array to retrieve your image path and display it accordingly.
I think you shouldn't be worried about base64 as images are stored locally and path will be sufficient to display the image.
Hope this will help!!!
Side Note: You can avoid the Array#flat part as you are already doing it manually [...JsonData["apptizer"], ...JsonData["main"]] but flat will be handy in case there are more keys in jsonData that need to be considered.
how can I bind my local JSON model to my MultiComboBox.
The XML code for the combobox is looking as followed:
<MultiComboBox id="multiBox" selectionFinish="onBoxFinish"/>
The model looks like this:
var exampleData = {
"data": [{
"name": "Example1",
"value": "16.505406"
},
{
"name": "Example2",
"value": "6.65465"
},
{
"name": "Example3",
"value": "89.56456"
}]
};
I want to display the 3 names in the ComboBox.
Can someone help me with this?
Thanks.
Firstly, instantiate a JSONModel with your data. Secondly, set the JSONModel to your view. Thirdly, bind the model to your MultiComboBox.
var oData = {
"data": [
{
"name": "Example1",
"value": "16.505406"
},
{
"name": "Example2",
"value": "6.65465"
},
{
"name": "Example3",
"value": "89.56456"
}
]
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
<MultiComboBox
selectionFinish="onBoxFinish"
items="{/data}">
<core:Item
key="{name}"
text="{value}">
</core:Item>
</MultiComboBox>
I am trying to hook select2 when an element has class "select2picker" i am also customising if the source of the dropdown list is an array. My code below
$('.select2picker').each(function() {
var settings = {};
if ($(this).attr('data-json')) {
var jsonValue = JSON.parse($(this).attr('data-json')).val());
settings = {
placeholder: $(this).attr('data-placeholder'),
minimumInputLength: $(this).attr('data-minimumInputLength'),
allowClear: true,
data: jsonValue
}
}
$(this).select2(settings);
});
but the result is horrible it fails to hook all the select2 dropdownlist
but when I comment out the data property, the output shows perfect (but the data binding goes missing)
My array looks like the following
[ { "id": "2015-0152", "text": "2015-0152" }, { "id": "2015-0153", "text": "2015-0153" }, { "id": "2016-0001", "text": "2016-0001" }, { "id": "2016-0002", "text": "2016-0002" }, { "id": "2016-0003", "text": "2016-0003" }, { "id": "2016-0004", "text": "2016-0004" }, { "id": "2016-0005", "text": "2016-0005" }, { "id": "2016-0006", "text": "2016-0006" }, { "id": "2016-0007", "text": "2016-0007" }, { ... }, { "id": "2015-0100", "text": "2015-0100" }, { "id": "2015-0101", "text": "2015-0101" }, { "id": "2015-0080", "text": "2015-0080" }, { "id": "2015-0081", "text": "2015-0081" }, { "id": "2015-0090", "text": "2015-0090" }, { "id": "2015-0102", "text": "2015-0102" }, { "id": "2015-0112", "text": "2015-0112" }, { "id": "2015-0128", "text": "2015-0128" }, { "id": "2015-0136", "text": "2015-0136" } ]
I am really confused about what is going wrong. Any idea?
Select2 version: 3.4.8
This line gives an error: var jsonValue = JSON.parse($(this).attr('data-json')).val());
Should be: var jsonValue = JSON.parse($(this).attr('data-json'));.
Also this line in your question:
i am also customising if the source of the dropdown list is an array
Indicates to me that it might also not be an array. In that cause you should check if it is an array before you pass the data to select2.
EDITED: Another thing that came to my mind was the following.
If you're using data properties for the placeholder I don't think you need to pass the values of those properties to select2 a second time like you do here
placeholder: $(this).attr('data-placeholder'),
minimumInputLength: $(this).attr('data-minimumInputLength'),
Might be that you need to pick one of the two (either pass it along in your settings, or use an attribute). As select2 looks at the data attributes to get a value.
I checked if the above was correct turns out it isn't. It works fine in this fiddle: https://jsfiddle.net/wL7oxbpv/
I think there is something wrong with your array data. Please check that.
I am using loopjs tokeninput in a View. In this scenario I need to prePopulate the control with AdminNames for a given Distributor.
Code Follows :
$.getJSON("#Url.Action("SearchCMSAdmins")", function (data) {
var json=eval("("+data+")"); //doesnt work
var json = {
"users": [
eval("("+data+")") //need help in this part
]
}
});
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate: json.users
});
There is successful return of json values to the below function. I need the json in the below format:
var json = {
"users":
[
{ "id": "1", "name": "USER1" },
{ "id": "2", "name": "USER2" },
{ "id": "3", "name": "USER3" }
]
}