Im wondering how I can grab and then display in my html file(using pure Javascript) the following objects found in the below JSON file? I specifically need to grab the following 3 objects and display each instance of each.. "barTitle," "id," and show all "OpenTimes."
Please note, I do have this file already uploaded to a webserver(http://codepupil.com/js/bar.json).
onBarLocationsLoaded({
"results":[
{
"barCity":"Annapolis",
"barState":"MD",
"barZip":"21401",
"recordingPhone":"410-213-1145",
"distance":"2.10",
"longitude":-725464,
"latitude":489914,
"barLong":-725464,
"barLat":489914,
"barLink":"http:\/\/www.bar.com\/bar\/bow-tie",
"barName":"Bow Tie Bar",
"movie":[
{
"barTitle":"Bar Louie",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Louise",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Louie",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Capo",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Boo Boo",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
}
]
});
This is a function call with a big ass parameter
For example
function launchAnAlert(message) {
alert(message);
}
This a js function that take a parameter named message and does something with it.
and if you want to call that function you do it like this
launchAnAlert("This is my text message");
Now let's take a look at your snippet, as you can see it looks like the previous call but instead of a String you are passing a Json object as parameter.
Your function name is onBarLocationsLoaded , in that snippet of yours is of this form
onBarLocationsLoaded(theJsonObject);
And there is an error in that Json object.
You Json file should contain this :
{
"results":[
{
"barCity":"Annapolis",
"barState":"MD",
"barZip":"21401",
"recordingPhone":"410-213-1145",
"distance":"2.10",
"longitude":-725464,
"latitude":489914,
"barLong":-725464,
"barLat":489914,
"barLink":"http:\/\/www.bar.com\/bar\/bow-tie",
"barName":"Bow Tie Bar",
"movie":[
{
"barTitle":"Bar Louie",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Louise",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Louie",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Capo",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
},
{
"barTitle":"Bar Boo Boo",
"Id":"20057095",
"openTimes":[
{
"time":"12:00pm"
},
{
"time":"3:40pm"
},
{
"time":"6:40pm"
}
]
}
]
}
]
}
Now if you use the answer you can find here : https://stackoverflow.com/a/7220510/4088809
This should answer your question or at least point you in the direction : http://jsfiddle.net/hrncdj8e/
Related
I have a [simplified] JSON file like
{
"id":87,
"meta_data":[
{
"id":1232,
"key":"user_created_by",
"value":"example#gmail.com"
},
{
"id":1233,
"key":"user_created_at",
"value":"1659890457477"
},
{
"id":1234,
"key":"good_person_or_silly_sausage",
"value":"No"
}
]
}
I want to do something like
Logger.log(orderDetailsObject.meta_data.value[key="good_person_or_silly_sausage"])
The expected value would be
No
However, this isn't what's occurring. At present I'm being told that the object is null.
I think it's because the meta_data object is an object in an object or two dimensional array or something? I don't have a good understand of what I'm doing here,
I feel like
https://docs.jsonata.org/simple
and
https://docs.jsonata.org/predicate
Should be guiding me towards the answer - but I'm not getting something I think.
I'm a newbie to SO and JSON & Javascript - so please be gentle. <3
EDIT: None-simplified actual json file below:
{
"id":87,
"parent_id":0,
"status":"pending",
"currency":"USD",
"version":"6.5.1",
"prices_include_tax":false,
"date_created":"2022-08-07T16:40:57",
"date_modified":"2022-08-11T10:13:07",
"discount_total":"0.00",
"discount_tax":"0.00",
"shipping_total":"0.00",
"shipping_tax":"0.00",
"cart_tax":"0.00",
"total":"1100.00",
"total_tax":"0.00",
"customer_id":17,
"order_key":"wc_order_omQo7nW5yCS9X",
"billing":{
"first_name":"",
"last_name":"",
"company":"",
"address_1":"",
"address_2":"",
"city":"",
"state":"",
"postcode":"",
"country":"",
"email":"freddie#example.com",
"phone":""
},
"shipping":{
"first_name":"",
"last_name":"",
"company":"",
"address_1":"",
"address_2":"",
"city":"",
"state":"",
"postcode":"",
"country":"",
"phone":""
},
"payment_method":"",
"payment_method_title":"",
"transaction_id":"",
"customer_ip_address":"",
"customer_user_agent":"",
"created_via":"rest-api",
"customer_note":"",
"date_completed":null,
"date_paid":"2022-08-07T16:40:58",
"cart_hash":"",
"number":"87",
"meta_data":[
{
"id":1232,
"key":"user_created_by",
"value":"example#gmail.com"
},
{
"id":1233,
"key":"user_created_at",
"value":"1659890457477"
},
{
"id":1234,
"key":"good_person_or_silly_sausage",
"value":"No"
},
{
"id":1235,
"key":"order_request_high_chair",
"value":"yes"
},
{
"id":1240,
"key":"order_notes",
"value":"They're on their honeymoon"
},
{
"id":1241,
"key":"pricing_notes",
"value":"They're on their honeymoon"
},
{
"id":1242,
"key":"order_booked_by",
"value":"me on me"
},
{
"id":1243,
"key":"order_referral_source",
"value":"Newspaper"
},
{
"id":1244,
"key":"commission_percent",
"value":"13"
},
{
"id":1245,
"key":"discount_percent",
"value":"5"
},
{
"id":1246,
"key":"deposit_paid_date",
"value":"today"
},
{
"id":1247,
"key":"damage_bond_date_paid",
"value":"today"
},
{
"id":1248,
"key":"damage_bond",
"value":"100"
},
{
"id":1249,
"key":"start_date",
"value":"01\/01\/01"
},
{
"id":1250,
"key":"deposit_payment_amount",
"value":"500"
},
{
"id":1251,
"key":"order_request_welcome_pack_wine_type",
"value":"Red"
},
{
"id":1252,
"key":"end_date",
"value":"02\/02\/02"
},
{
"id":1259,
"key":"_new_order_email_sent",
"value":"true"
},
{
"id":1260,
"key":"_automatewoo_order_created",
"value":"1"
}
],
"line_items":[
{
"id":45,
"name":"Villa Booking",
"product_id":0,
"variation_id":0,
"quantity":1,
"tax_class":"",
"subtotal":"1000.00",
"subtotal_tax":"0.00",
"total":"1000.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":411,
"key":"Dates",
"value":"01\/01\/01 until 02\/02\/02",
"display_key":"Dates",
"display_value":"01\/01\/01 until 02\/02\/02"
}
],
"sku":null,
"price":1000,
"parent_name":null
},
{
"id":46,
"name":"Standard Welcome Pack",
"product_id":73,
"variation_id":0,
"quantity":2,
"tax_class":"",
"subtotal":"0.00",
"subtotal_tax":"0.00",
"total":"0.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":421,
"key":"Wine Type",
"value":"Red",
"display_key":"Wine Type",
"display_value":"Red"
}
],
"sku":"",
"price":0,
"parent_name":null
}
],
"tax_lines":[
],
"shipping_lines":[
],
"fee_lines":[
{
"id":47,
"name":"Damage Bond",
"tax_class":"",
"tax_status":"taxable",
"amount":"100",
"total":"100.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":428,
"key":"damage_bond_paid_to",
"value":"example#gmail.com",
"display_key":"damage_bond_paid_to",
"display_value":"example#gmail.com"
},
{
"id":429,
"key":"damage_bond_paid_on",
"value":"today",
"display_key":"damage_bond_paid_on",
"display_value":"today"
}
]
},
{
"id":48,
"name":"Booking Fee",
"tax_class":"",
"tax_status":"taxable",
"amount":"",
"total":"0.00",
"total_tax":"0.00",
"taxes":[
],
"meta_data":[
{
"id":436,
"key":"dbooing_fee_paid_to",
"value":"example#gmail.com",
"display_key":"dbooing_fee_paid_to",
"display_value":"example#gmail.com"
},
{
"id":437,
"key":"booking_fee_paid_on",
"value":"1659890457477",
"display_key":"booking_fee_paid_on",
"display_value":"1659890457477"
}
]
}
],
"coupon_lines":[
],
"refunds":[
],
"payment_url":"https:\/\/dev1.example.com\/checkout\/order-pay\/87\/?pay_for_order=true&key=wc_order_omQo7nW5yCS9X",
"date_created_gmt":"2022-08-07T16:40:57",
"date_modified_gmt":"2022-08-11T10:13:07",
"date_completed_gmt":null,
"date_paid_gmt":"2022-08-07T16:40:58",
"currency_symbol":"$",
"_links":{
"self":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/orders\/87"
}
],
"collection":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/orders"
}
],
"customer":[
{
"href":"https:\/\/dev1.example.com\/wp-json\/wc\/v3\/customers\/17"
}
]
}
}
You can use the find method on the array:
const orderDetailsObject = {"id":87,"meta_data":[{"id":1232,"key":"user_created_by","value":"example#gmail.com"},{"id":1233,"key":"user_created_at","value":"1659890457477"},{"id":1234,"key":"good_person_or_silly_sausage","value":"No"}]};
console.log(orderDetailsObject.meta_data.find(
({key}) => key == "good_person_or_silly_sausage"
)?.value);
I'm trying to filter a data only "$match" user_data && seat_id I want use array that get in first "$match" in last pipeline "$match" after "$unwind" operator and I'm trying to do "$lookup" and find only matching element. my last "$match" aggregate not working last pipeline is to not working
---------this is my data----------
{
"user_id": {
"$oid": "62b048e762c6edd8b5d55b3e"
},
"ticketData": [
{
"seat_id": {
"$oid": "62b2098a9d03eb2e90ec089f"
}
},
{
"seat_id": {
"$oid": "62b2098a9d03eb2e90ec08a0"
}
},
{
"seat_id": {
"$oid": "62b2098a9d03eb2e90ec08a1"
}
}
],
"seat_status": true,
"createdAt": {
"$date": "2022-06-22T05:19:40.995Z"
}
}
this is the pipeline that I wrote
[
{
'$match': {
'user_id': new ObjectId('62b048e762c6edd8b5d55b3e')
}
}, {
'$lookup': {
'from': 'seats',
'localField': 'ticketData.seat_id',
'foreignField': 'show_seats.showByDate.shows.showSeats._id',
'as': 'seat_details'
}
}, {
'$unwind': {
'path': '$seat_details'
}
}, {
'$unwind': {
'path': '$seat_details.show_seats'
}
}, {
'$unwind': {
'path': '$seat_details.show_seats.showByDate.shows'
}
}, {
'$unwind': {
'path': '$seat_details.show_seats.showByDate.shows.showSeats'
}
}, {
'$match': {
'seat_details.show_seats.showByDate.shows.showSeats._id': {
'$in': 'ticketData.seat_id'
}
}
}
]
So, I'm relatively new to javascript, and I'm working with a client-side javascript function that inserts JSON results pushed to it from the server.
I would like to stop certain results, independently of that javascript that populating the results.
Usually, if the js was my own, I'd make a guess that I'd use the "splice" function to remove the JSON array entry(ies) that I don't wish to be there, does that sound about right? (I'd got to there through plenty of searching on StartPage and here)
However, I need whatever function I (let's be honest, "you") come up with to trump the embedded results.
Essentially this is normal behaviour:
Webpage > JavaScript Parses JSON for Initial Results
then
Webpage > Scroll > JavaScript Parses JSON for More Results
I'd like to insert something that will stop any JSON items that I don't like. I don't know how to represent that, I'd assume:
Worker in Extension/Add-On > Webpage > etc
I doubt this can be done with CSS ... but that'd be awesome, as I'd just put it in my personal.
If it was splice, I'd have a vague idea (but really I'm flying blind) of how to do it on a base level with splice, but I'm already struggling, and that would deepen for the insanely deeply embedded objects I'm trying to exclude.
So. There is lot of json data in the section I'm looking at.
I'm purely concentrated on the removing of the array here, but by end goal is two parts:
In the ' contents ' array in levelOneB's ' daContentShaper ' I would
like to remove any item from the array where in the sub-object '
content ' there is an element called ' contentTypeA '. There's another
object with the label ' ahThisIsTheBContent ', which I'd also like gone,
and that's dotted through the JSON. All other items (TypeB, TypeC, or
other) must stay.
Additionally, within said ' content ' object I would like to change any ' visible ' values that are " false " to " true ".
It's definitely possible, it's just working out how to ensure that the rest of the code (which may have similar - not the same - parts elsewhere) isn't affected by my splice of this array.
{
"levelOneA": {
"levelOneAArr": [ { "name": "me", "age": 1 }, { "name": "you", "age": 2 }, { "name": "them", "age": 3 } ],
"levelOneAText": "blah"
},
"levelOneB": {
"levelOneBDeepBro": {
"levelOneBDeepBroTabs": [
{
"levelOneBDeepBroTabsShaper": {
"isBlessed": true,
"daContent": {
"daContentShaper": {
"contents": [
{
"contentItem": {
"content": {
"contentTypeA": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlah"
}
},
{
"contentItem": {
"content": {
"ahThisIsTheBContent": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": false
}
},
"extraNonsense": "bingoBlahBlah"
}
},
{
"contentItem": {
"content": {
"contentTypeB": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "jinkies"
},
{
"bitBText1": "ruh roh"
},
{
"bitBText1": "like, wow"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlahBlah"
}
},
{
"contentItem": {
"content": {
"contentTypeC": {
"bitA": "bitAText",
"bitB": [
{
"bitBText1": "cripes"
},
{
"bitBText1": "crikey"
},
{
"bitBText1": "crimeny"
}
],
"visible": true
}
},
"extraNonsense": "bingoBlahBlahBlah"
}
}
],
"myDadIsBetter": "Go Faster Stripes, innit."
}
},
"tabId": "Bro"
}
}
]
}
},
"levelOneC": "CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=",
"levelOneD": {
"iAmJustHappyToBeNominated": "innit",
"damnYourWholePopCultureSubsection": "flames abound"
}
}
This is how you could solve this using object-scan
Note that I used quite a few ** in the matching. You could write these out exactly, it depends on your requirement
// const objectScan = require('object-scan');
const data = { levelOneA: { levelOneAArr: [{ name: 'me', age: 1 }, { name: 'you', age: 2 }, { name: 'them', age: 3 }], levelOneAText: 'blah' }, levelOneB: { levelOneBDeepBro: { levelOneBDeepBroTabs: [ { levelOneBDeepBroTabsShaper: { isBlessed: true, daContent: { daContentShaper: { contents: [ { contentItem: { content: { contentTypeA: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: true } }, extraNonsense: 'bingoBlah' } }, { contentItem: { content: { ahThisIsTheBContent: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: false } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeB: { bitA: 'bitAText', bitB: [ { bitBText1: 'jinkies' }, { bitBText1: 'ruh roh' }, { bitBText1: 'like, wow' } ], visible: false } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeC: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: false } }, extraNonsense: 'bingoBlahBlahBlah' } } ], myDadIsBetter: 'Go Faster Stripes, innit.' } }, tabId: 'Bro' } } ] } }, levelOneC: 'CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=', levelOneD: { iAmJustHappyToBeNominated: 'innit', damnYourWholePopCultureSubsection: 'flames abound' } };
const logic = {
'levelOneB.**.daContentShaper.contents[*].*.content.{contentTypeA,ahThisIsTheBContent}': ({ key, parents }) => {
parents[3].splice(key[key.length - 4], 1);
},
'levelOneB.**.daContentShaper.contents.**.visible': ({ value, parent, property }) => {
if (value === false) {
parent[property] = true;
}
}
};
const modify = objectScan(Object.keys(logic), {
rtn: 'count',
filterFn: ({ matchedBy, property, key, value, parent, parents }) => {
matchedBy.forEach((m) => logic[m]({ property, key, value, parent, parents }));
}
});
console.log(modify(data));
// => 6
console.log(data);
// => { levelOneA: { levelOneAArr: [ { name: 'me', age: 1 }, { name: 'you', age: 2 }, { name: 'them', age: 3 } ], levelOneAText: 'blah' }, levelOneB: { levelOneBDeepBro: { levelOneBDeepBroTabs: [ { levelOneBDeepBroTabsShaper: { isBlessed: true, daContent: { daContentShaper: { contents: [ { contentItem: { content: { contentTypeB: { bitA: 'bitAText', bitB: [ { bitBText1: 'jinkies' }, { bitBText1: 'ruh roh' }, { bitBText1: 'like, wow' } ], visible: true } }, extraNonsense: 'bingoBlahBlah' } }, { contentItem: { content: { contentTypeC: { bitA: 'bitAText', bitB: [ { bitBText1: 'cripes' }, { bitBText1: 'crikey' }, { bitBText1: 'crimeny' } ], visible: true } }, extraNonsense: 'bingoBlahBlahBlah' } } ], myDadIsBetter: 'Go Faster Stripes, innit.' } }, tabId: 'Bro' } } ] } }, levelOneC: 'CAAQhGciEwi0iqD5-ZbwAhUBPvEFHQMKAeo=', levelOneD: { iAmJustHappyToBeNominated: 'innit', damnYourWholePopCultureSubsection: 'flames abound' } }
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#14.3.0"></script>
Disclaimer: I'm the author of object-scan
Hi I am trying to compare two array of objects and want to achieve the custom array of object by manipulating it.
I would like to achieve something like this by checking each time anything from object1 is removed or not? if it is removed then it should change attribute to 'Y'.
object 1 = [
{
"label":"a",
"removed":"N",
"value":1
},
{
"label":"b",
"removed":"N",
"value":2
}
]
object 2 =[
{
"label":"a",
"removed":"N",
"value":1
},
{
"label":"c",
"removed":"N",
"value":3
}
]
result should be =
[{
label:"a",
removed:"N",
value:1
},{
label:"b",
removed:"Y",
value:2
},{
label:"c",
removed:"N",
value:3
}]
I have tried to loop both array and tried to achieve the same but it is somehow not working.
I tried following code.
let data = []
object1.forEach((item1) => {
object2.forEach((item2) => {
if (item1.value === item2.value) {
data.push(Object.assign(item1));
} else {
item2.removeFlag = 'Y';
data.push(Object.assign(item1, item2));
}
}
}
...Updated Question.....
obj1 = [
{
"val":"type1",
"removed":"N",
"data":[
{
"label":"type1-a",
"removed":"N",
"dataid":16
},
{
"label":"type1-b",
"removed":"N",
"dataid":26
}
]
},
{
"val":"type2",
"removed":"N",
"data":[
{
"label":"type2-a",
"removed":"N",
"dataid":12
},
{
"label":"type2-b",
"removed":"N",
"dataid":34
}
]
},
{
"val":"type3",
"removed":"N",
"id":124,
"label":"type3-label1"
},
{
"val":"type4",
"removed":"N",
"id":126,
"label":"type4-label1"
},
{
"val":"type4",
"removed":"N",
"id":128,
"label":"type4-label2"
}
]
obj2 = [
{
"val":"type1",
"removed":"N",
"data":[
{
"label":"type1-a",
"removed":"N",
"dataid":16
},
{
"label":"type1-c",
"removed":null,
"dataid":null
},
{
"label":"type1-d",
"removed":null,
"dataid":null
}
]
},
{
"val":"type3",
"removed":"N",
"id":124,
"label":"type3-label1"
},
{
"val":"type4",
"removed":"N",
"id":126,
"label":"type4-label1"
},
{
"val":"type4",
"removed":null,
"id":null,
"label":"type4-label3"
}
]
result = [
{
"val":"type1",
"removed":"N",
"data":[
{
"label":"type1-a",
"removed":"N",
"dataid":16
},
{
"label":"type1-b",
"removed":"Y",
"dataid":26
},
{
"label":"type1-c",
"removed":null,
"dataid":null
},
{
"label":"type1-d",
"removed":null,
"dataid":null
}
]
},
{
"val":"type2",
"removed":"Y",
"data":[
{
"label":"type2-a",
"removed":"N",
"dataid":12
},
{
"label":"type2-b",
"removed":"N",
"dataid":34
}
]
},
{
"val":"type3",
"removed":"N",
"id":124,
"label":"type3-label1"
},
{
"val":"type4",
"removed":"N",
"id":126,
"label":"type4-label1"
},
{
"val":"type4",
"removed":"Y",
"id":128,
"label":"type4-label2"
},
{
"val":"type4",
"removed":null,
"id":null,
"label":"type4-label3"
}
]
const object1 = [{
"label": "a",
"removed": "N",
"value": 1
},
{
"label": "b",
"removed": "N",
"value": 2
}
]
const object2 = [{
"label": "a",
"removed": "N",
"value": 1
},
{
"label": "c",
"removed": "N",
"value": 3
}
]
const result = [...object2.map(record => {
const record2 = object1.find(pr => pr.label === record.label) || {};
return {
...record,
...record2
}
}), ...object1.filter(pr => !object2.some(npr => npr.label === pr.label)).map(pr => ({ ...pr,
removed: "Y"
}))]
console.log(result);
--Edit
With nested data you have to repeat the same code inside reduce function.
Example
const result = [...object2.map(record => {
const record2 = object1.find(pr => pr.val === record.val) || {};
const data = [...(record.data || []).map(pr => ({ ...pr,
...(record2.data.find(npr => npr.label === pr.label) || {})
})),
...(record2.data || []).filter(pr => !record.data.some(npr => npr.label === pr.label)).map(pr => ({ ...pr,
removed: 'Y'
}))
]
return {
...record,
...record2,
data
}
}), ...object1.filter(pr => !object2.some(npr => npr.val === pr.val)).map(pr => ({ ...pr,
removed: "Y"
}))]
I am trying to configure the tooltip of the so that it displays only 2 decimal places, but the headerformat does not seem to be wokring and it keeps showing the entire decimal places.
what is going wrong here?
{
"chart":{
"type":"line",
"height":40,
"width":40
},
"title":{
"text":null
},
"subtitle":{
"text":null
},
"xAxis":{
"categories":[
]
},
"yAxis":{
"title":{
"enabled":true,
"text":"Amount (Dollars)",
"style":{
"fontWeight":"normal"
}
},
"plotLines":[
{
"value":0,
"width":1,
"color":"#808080"
}
]
},
"options":{
"legend":{
"enabled":false
}
},
"plotOptions":{
},
"series":[
{
"name":"Total",
"data":[
{
"name":"Apr'2016",
"y":1372406438.2385998
},
{
"name":"May'2016",
"y":5301389724.7499
},
{
"name":"Jun'2016",
"y":549467904.6918
},
{
"name":"July'2016",
"y":549040695.1202999
},
{
"name":"Aug'2016",
"y":1160837116.1138
},
{
"name":"Sep'2016",
"y":22.7612
}
],
"color":"#008CE6",
"marker":{
"enabled":false
},
"id":"series-3"
},
{
"name":"Toal Timely",
"data":[
{
"name":"Apr'2016",
"y":427101358.1748,
"month":"Apr"
},
{
"name":"May'2016",
"y":5191919648.9571,
"month":"May"
},
{
"name":"Jun'2016",
"y":288691855.262,
"month":"Jun"
},
{
"name":"July'2016",
"y":264281732.18769997,
"month":"July"
},
{
"name":"Aug'2016",
"y":853641906.2942,
"month":"Aug"
},
{
"name":"Sep'2016",
"y":0,
"month":"Sep"
}
],
"color":"#4ca977",
"marker":{
"enabled":false
},
"id":"series-4"
},
{
"name":"Total Untimely",
"data":[
{
"name":"Apr'2016",
"y":945305080.0637999,
"month":"Apr"
},
{
"name":"May'2016",
"y":109470075.79279998,
"month":"May"
},
{
"name":"Jun'2016",
"y":260776049.4298,
"month":"Jun"
},
{
"name":"July'2016",
"y":284758962.93259996,
"month":"July"
},
{
"name":"Aug'2016",
"y":307195209.8196,
"month":"Aug"
},
{
"name":"Sep'2016",
"y":22.7612,
"month":"Sep"
}
],
"color":"#e54343",
"marker":{
"enabled":false
},
"id":"series-5"
}
],
"tooltip":{
"pointFormat":"<b>{point.y}</b>",
"shared":true
}
}
Add decimals to the point.y value.
"pointFormat": "<b>{point.y:.2f}</b><br>",
Example:
http://jsfiddle.net/78yqgzz4/