We Keep Coding

Finding Products Based on Category (Commerce.js)

I'm currently working on a personal project, which is an E-Commerce Web App. To do this, I used the Commerce.js library and is currently hitting a roadblock. Although technically I can do this by using nested for loops, I would like to look for a more efficient method that uses cleaner code and is faster and more efficient with resources.
The Commerce.js documentation does not return the products in a certain category, therefore I have to use two functions to get them seperately.
const commerce = new Commerce(process.env.REACT_APP_API_KEY)
var shopItems;
var categoriesList;
useEffect(()=> {
commerce.categories.list().then((categories) => {
categoriesList = categories;
console.log(categoriesList.data)
});
commerce.products.list().then((product) => {
shopItems = product;
console.log(shopItems.data)
});
})
DATA
Categories:
{
"id": "cat_O3bR5XyEklnzdj",
"parent_id": null,
"slug": "new-releases",
"name": "New Releases",
"description": null,
"products": 1,
"created": 1639555008,
"updated": 1639555008,
"meta": null,
"assets": [
{
"id": "ast_Op1YoVxzaglXLv",
"url": "https://cdn.chec.io/merchants/37076/assets/aHVfA98RM9vVKjMa|Screenshot (6).png",
"description": null,
"is_image": true,
"filename": "Screenshot (6).png",
"file_size": 933236,
"file_extension": "png",
"image_dimensions": {
"width": 1920,
"height": 1080
},
"meta": [],
"created_at": 1639555026,
"updated_at": 1639555031
}
],
"children": []
}
Products:
[
{
"id": "prod_RyWOwmdx1GlnEa",
"created": 1639554903,
"updated": 1639554964,
"active": true,
"permalink": "tE45fb",
"name": "Air Jordan 11 Cool Grey",
"description": "<p></p>",
"price": {
"raw": 300000,
"formatted": "300,000.00",
"formatted_with_symbol": "Rp300,000.00",
"formatted_with_code": "300,000.00 IDR"
},
"inventory": {
"managed": false,
"available": 0
},
"sku": null,
"sort_order": 0,
"seo": {
"title": null,
"description": null
},
"thank_you_url": null,
"meta": null,
"conditionals": {
"is_active": true,
"is_tax_exempt": false,
"is_pay_what_you_want": false,
"is_inventory_managed": false,
"is_sold_out": false,
"has_digital_delivery": false,
"has_physical_delivery": false,
"has_images": true,
"collects_fullname": false,
"collects_shipping_address": false,
"collects_billing_address": false,
"collects_extra_fields": false
},
"is": {
"active": true,
"tax_exempt": false,
"pay_what_you_want": false,
"inventory_managed": false,
"sold_out": false
},
"has": {
"digital_delivery": false,
"physical_delivery": false,
"images": true
},
"collects": {
"fullname": false,
"shipping_address": false,
"billing_address": false,
"extra_fields": false
},
"checkout_url": {
"checkout": "https://checkout.chec.io/tE45fb?checkout=true",
"display": "https://checkout.chec.io/tE45fb"
},
"extra_fields": [],
"variant_groups": [],
"categories": [],
"assets": [
{
"id": "ast_8XO3wpM74OoYAz",
"url": "https://cdn.chec.io/merchants/37076/assets/1WUVJv226CmE5Xp2|air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
"description": null,
"is_image": true,
"filename": "air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
"file_size": 24857,
"file_extension": "jpg",
"image_dimensions": {
"width": 960,
"height": 1080
},
"meta": [],
"created_at": 1639554944,
"updated_at": 1639554948
},
{
"id": "ast_bO6J5aBxDElEjp",
"url": "https://cdn.chec.io/merchants/37076/assets/xRQc9seG948wu332|download (1).jfif",
"description": null,
"is_image": true,
"filename": "download (1).jfif",
"file_size": 7152,
"file_extension": "jpg",
"image_dimensions": {
"width": 294,
"height": 171
},
"meta": [],
"created_at": 1639554948,
"updated_at": 1639554949
},
{
"id": "ast_A12JwrMQExlPjn",
"url": "https://cdn.chec.io/merchants/37076/assets/5RmVeAD6AX6l1O7D|download.jfif",
"description": null,
"is_image": true,
"filename": "download.jfif",
"file_size": 5551,
"file_extension": "jpg",
"image_dimensions": {
"width": 266,
"height": 190
},
"meta": [],
"created_at": 1639554959,
"updated_at": 1639554961
}
],
"image": {
"id": "ast_8XO3wpM74OoYAz",
"url": "https://cdn.chec.io/merchants/37076/assets/1WUVJv226CmE5Xp2|air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
"description": null,
"is_image": true,
"filename": "air-jordan-11-cool-grey-ct8012-005-release-date (1).jpg",
"file_size": 24857,
"file_extension": "jpg",
"image_dimensions": {
"width": 960,
"height": 1080
},
"meta": [],
"created_at": 1639554944,
"updated_at": 1639554948
},
"related_products": [],
"attributes": []
},
{
"id": "prod_BkyN5YVzyxl0b6",
"created": 1639564691,
"updated": 1639564756,
"active": true,
"permalink": "BPMQ0E",
"name": "Air Jordan 5 Green Bean",
"description": "",
"price": {
"raw": 400000,
"formatted": "400,000.00",
"formatted_with_symbol": "Rp400,000.00",
"formatted_with_code": "400,000.00 IDR"
},
"inventory": {
"managed": false,
"available": 0
},
"sku": null,
"sort_order": 0,
"seo": {
"title": null,
"description": null
},
"thank_you_url": null,
"meta": null,
"conditionals": {
"is_active": true,
"is_tax_exempt": false,
"is_pay_what_you_want": false,
"is_inventory_managed": false,
"is_sold_out": false,
"has_digital_delivery": false,
"has_physical_delivery": false,
"has_images": true,
"collects_fullname": false,
"collects_shipping_address": false,
"collects_billing_address": false,
"collects_extra_fields": false
},
"is": {
"active": true,
"tax_exempt": false,
"pay_what_you_want": false,
"inventory_managed": false,
"sold_out": false
},
"has": {
"digital_delivery": false,
"physical_delivery": false,
"images": true
},
"collects": {
"fullname": false,
"shipping_address": false,
"billing_address": false,
"extra_fields": false
},
"checkout_url": {
"checkout": "https://checkout.chec.io/BPMQ0E?checkout=true",
"display": "https://checkout.chec.io/BPMQ0E"
},
"extra_fields": [],
"variant_groups": [],
"categories": [
{
"id": "cat_O3bR5XyEklnzdj",
"slug": "new-releases",
"name": "New Releases"
}
],
"assets": [
{
"id": "ast_8XO3wpM7yOoYAz",
"url": "https://cdn.chec.io/merchants/37076/assets/L4NaqCsUMMxS6Ie8|2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
"description": null,
"is_image": true,
"filename": "2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
"file_size": 60899,
"file_extension": "jpg",
"image_dimensions": {
"width": 1068,
"height": 707
},
"meta": [],
"created_at": 1639564675,
"updated_at": 1639564678
}
],
"image": {
"id": "ast_8XO3wpM7yOoYAz",
"url": "https://cdn.chec.io/merchants/37076/assets/L4NaqCsUMMxS6Ie8|2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
"description": null,
"is_image": true,
"filename": "2022-Air-Jordan-5-Green-Bean-1068x707.jpg",
"file_size": 60899,
"file_extension": "jpg",
"image_dimensions": {
"width": 1068,
"height": 707
},
"meta": [],
"created_at": 1639564675,
"updated_at": 1639564678
},
"related_products": [],
"attributes": []
}
]
is there a way to efficiently and cleanly find products based on their categories? Thank you in advance.

Yes. There is a way by using the category 'slug'.
import Commerce from '#chec/commerce.js';
const commerce = new Commerce('{your_public_key}');
// Fetch products specifying a category slug
commerce.products.list({
category_slug: ['shoes'],
}).then(response => response.data);
// Fetch products specifying multiple category slugs
commerce.products.list({
category_slug: ['shoes', 'black'],
}).then(response => response.data);
For more details:
https://commercejs.com/docs/sdk/products#retrieve-product

Calculating percentage value for each serie in highcharts

I am trying to calculate % values for each series, what I managed to find is function like
formatter:function() {
var pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
But what confuses me is how can I make dynamically this function so it can be applied on every serie object that is provided
Emphasize on dataSum from function above.
I tried googling just in case highcharts provide already some solution that they have in their documentation but sadly I did not find anything, only thing I found is to concatenate already provided value with + '%', and that is far beyond real value of percentage of that specific serie
$(function() {
var chart = new Highcharts.Chart(
{
"meta": {
"drilldownEnabled": false
},
"chart": {
renderTo:"container",
"additionalData": {
"dateTime": false,
"datetype": "string",
"cliccable": true,
"drillable": false,
"drillableChart": false,
"isCockpit": true,
"categoryColumn": "city",
"categoryGroupBy": "",
"categoryGroupByNamens": "",
"categoryName": "city",
"categoryOrderColumn": "",
"categoryOrderType": "",
"categoryStacked": "",
"categoryStackedType": ""
},
"zoomType": "xy",
"panning": true,
"type": "column",
"options3d": {
"enabled": false,
"alpha": 25,
"beta": 15,
"depth": 50,
"viewDistance": 25
},
"backgroundColor": "#FFFFFF",
"heightDimType": "pixels",
"widthDimType": "pixels",
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"borderColor": "#FFFFFF",
"style": {
"backgroundColor": "#FFFFFF",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
},
"events": {}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"title": {
"text": "",
"style": {
"align": "",
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
}
},
"legend": {
"itemDistance": 0,
"symbolPadding": 25,
"enabled": false
},
"xAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"type": "category",
"id": 0,
"title": {
"customTitle": false,
"text": "city",
"style": {}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
}
}
],
"yAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0,
"zIndex": 1
}
],
"title": {
"text": "",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
},
"gridLineDashStyle": "$convertedTypeline",
"minorGridLineDashStyle": "$convertedMinorTpeline"
}
],
"series": [
{
"name": "total_children",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": 271,
"name": "Pomona",
"datetype": "string"
},
{
"drilldown": false,
"y": 237,
"name": "Port Hammond",
"datetype": "string"
},
{
"drilldown": false,
"y": 205,
"name": "Port Orchard",
"datetype": "string"
},
{
"drilldown": false,
"y": 239,
"name": "Portland",
"datetype": "string"
},
{
"drilldown": false,
"y": 265,
"name": "Puyallup",
"datetype": "string"
},
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
},
{
"name": "num_cars_owned",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": 228,
"name": "Acapulco",
"datetype": "string"
},
{
"drilldown": false,
"y": 189,
"name": "Albany",
"datetype": "string"
},
{
"drilldown": false,
"y": 212,
"name": "Altadena",
"datetype": "string"
},
{
"drilldown": false,
"y": 219,
"name": "Anacortes",
"datetype": "string"
},
{
"drilldown": false,
"y": 231,
"name": "Arcadia",
"datetype": "string"
},
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
}
],
"tooltip": {
"borderWidth": 0,
"borderRadius": 0,
"followTouchMove": false,
"followPointer": true,
"useHTML": true,
"backgroundColor": null,
"style": {
"padding": 0
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"fontFamily": "",
"fontSize": "",
"color": ""
},
"position": {
"align": "center",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"line": {
"marker": {
"symbol": "circle",
"lineWidth": 2
}
},
"series": {
"events": {},
"showCheckbox": true,
"cursor": "pointer",
"point": {
"events": {}
},
"dataLabels": {
"allowOverlap": true
},
"turboThreshold": 2000
}
}
}
);
});
Has anyone ever step onto solution that provides % values of series by any case ?
I am trying to calculate % of total_children, and % of num_cars_owned serie as they are separated objects of serie array.
You can find code example on link HERE http://jsfiddle.net/JeLrb/538/

You need to calculate dataSum value:
tooltip: {
...,
formatter: function() {
var dataSum = 0,
pcnt;
this.series.points.forEach(function(point) {
dataSum += point.y;
});
pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
Live demo: http://jsfiddle.net/BlackLabel/9tbynahj/
API Reference: https://api.highcharts.com/highcharts/tooltip

mongodb find query is not working

I have a collection facialAnalysisConfiguration
the data in the collection is as shown below
{
"details": {
"date": ISODate("2018-04-03T11:54:53.916+0000"),
"statusText": "OK",
"config": {
"headers": {
"Content-Type": "application/json;charset=utf-8",
"Accept": "application/json, text/plain, */*"
},
"data": {
"image": ""
},
"url": "/storeIncommingImages",
"jsonpCallbackParam": "callback",
"transformResponse": [
null
],
"transformRequest": [
null
],
"method": "POST"
},
"status": NumberInt(200),
"data": {
"FaceModelVersion": "2.0",
"OrientationCorrection": "ROTATE_0",
"FaceRecords": [{
"FaceDetail": {
"Confidence": 99.9393310546875,
"Quality": {
"Sharpness": 99.80813598632812,
"Brightness": 12.500774383544922
},
"Pose": {
"Pitch": -5.199888229370117,
"Yaw": -3.2905712127685547,
"Roll": 7.3970136642456055
},
"Emotions": [{
"Confidence": 44.84807205200195,
"Type": "CONFUSED"
},
{
"Confidence": 17.345977783203125,
"Type": "CALM"
},
{
"Confidence": 6.819361686706543,
"Type": "SURPRISED"
}
],
"MouthOpen": {
"Confidence": 99.90953826904297,
"Value": false
},
"EyesOpen": {
"Confidence": 99.79545593261719,
"Value": true
},
"Mustache": {
"Confidence": 99.68254852294922,
"Value": false
},
"Beard": {
"Confidence": 95.8907470703125,
"Value": false
},
"Gender": {
"Confidence": 99.9259262084961,
"Value": "Male"
},
"Sunglasses": {
"Confidence": 99.36517333984375,
"Value": false
},
"Eyeglasses": {
"Confidence": 99.82603454589844,
"Value": true
},
"Smile": {
"Confidence": 50.894676208496094,
"Value": false
},
"AgeRange": {
"High": NumberInt(15),
"Low": NumberInt(10)
},
"BoundingBox": {
"Top": 0.4294871687889099,
"Left": 0.29567307233810425,
"Height": 0.39743590354919434,
"Width": 0.30048078298568726
}
},
"Face": {
"Confidence": 99.9393310546875,
"ExternalImageId": "belgium_medium_gender",
"ImageId": "65e5b4f0-f803-5592-9c7c-95d3b983290b",
"BoundingBox": {
"Top": 0.4294871687889099,
"Left": 0.29567307233810425,
"Height": 0.39743590354919434,
"Width": 0.30048078298568726
},
"FaceId": "a875fb3b-4257-4cf0-951b-3d4892aabe41"
}
}]
}
},
"__v": NumberInt(0)
}
how to get all the records where the Emotions.type value is "CONFUSED"
please note the object navigation is as shown below details.data.FaceRecords[0].FaceDetail.Confidence
Tried writing few quires using aggregation but unable to find please suggest a way to approach it

I see conflicts in your description. You have mentioned that you want to get all the records where the Emotions.type value is "CONFUSED" but later have specified a object navigation (FaceDetail.Confidence).
Regardless, the below query should return all the matching records whose Emotions.Type is CONFUSED.
db.facialAnalysisConfiguration.find( { "details.data.FaceRecords.FaceDetail.Emotions.Type": "CONFUSED" }

App.jsx:43 Uncaught (in promise) TypeError: this.state.concerts.map is not a function(…)

I keep getting this error when I'm trying to render json from the ticketmaster api in my App.jsx. The url I have on my backend is pulling the data to show the first 10 concert results. It shows up perfectly fine in my react console in chrome, put when I try to map the results to a div, I get this error message. Please help me.
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.state = {
concerts: [],
}
this.handleZip = this.handleZip.bind(this);
}
handleZip(e) {
e.preventDefault();
let zip = e.target.value;
if (zip) {
fetch(`api/services/ticketmaster/shows/${zip}`)
.then((response) => {
response.json().then(concerts => this.setState({
concerts: concerts._embedded,
// name: Object.values(concerts._embedded.events[0].images[0]),
// image: concerts._embedded.events[0].images[0],
// url: concerts._embedded.events[0].url,
// info: concerts._embedded.events[0].info,
// date: concerts._embedded.events[0].classifications[0].name,
}));
});
}
}
render() {
return (
<div className="search-container">
<div className="zipcode-search-bar">
<input onBlur={this.handleZip} type="text" placeholder="Enter your zip code" />
</div>
<div className="zipcode-search-btn">
<button className="zip-btn" onBlur= {this.handleZip}>Search</button>
</div>
<div>
{
this.state.concerts.map((concert) => {
return (
<div>
{concert}
</div>
);
})
}
</div>
</div>
);
}
}
export default App;
And this is what the data from ticketmaster looks like in postman:
{
"_embedded": {
"events": [
{
"name": "Big Gigantic",
"type": "event",
"id": "k7vGFfodZESLi",
"test": false,
"url": "http://ticketmaster.com/event/00005110C09F37EC",
"locale": "en-us",
"images": [
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025- b49a-5e20544c52e6_153341_EVENT_DETAIL_PAGE_16_9.jpg",
"width": 205,
"height": 115,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_LARGE_16_9.jpg",
"width": 2048,
"height": 1152,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_LANDSCAPE_16_9.jpg",
"width": 1136,
"height": 639,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_3_2.jpg",
"width": 1024,
"height": 683,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_16_9.jpg",
"width": 1024,
"height": 576,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_3_2.jpg",
"width": 640,
"height": 427,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_16_9.jpg",
"width": 640,
"height": 360,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RECOMENDATION_16_9.jpg",
"width": 100,
"height": 56,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_ARTIST_PAGE_3_2.jpg",
"width": 305,
"height": 203,
"fallback": false
},
{
"ratio": "4_3",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_CUSTOM.jpg",
"width": 305,
"height": 225,
"fallback": false
}
],
"sales": {
"public": {
"startDateTime": "2016-09-09T14:00:00Z",
"startTBD": false,
"endDateTime": "2016-11-06T00:00:00Z"
},
"presales": [
{
"startDateTime": "2016-09-07T14:00:00Z",
"endDateTime": "2016-09-09T02:00:00Z",
"name": "Venue Presale"
}
]
},
"dates": {
"start": {
"localDate": "2016-11-05",
"localTime": "21:00:00",
"dateTime": "2016-11-06T01:00:00Z",
"dateTBD": false,
"dateTBA": false,
"timeTBA": false,
"noSpecificTime": false
},
"timezone": "America/New_York",
"status": {
"code": "offsale"
}
},
"classifications": [
{
"primary": true,
"segment": {
"id": "KZFzniwnSyZfZ7v7nJ",
"name": "Music"
},
"genre": {
"id": "KnvZfZ7vAvF",
"name": "Dance/Electronic"
},
"subGenre": {
"id": "KZazBEonSMnZfZ7vAJ1",
"name": "Club Dance"
}
}
],
"promoter": {
"id": "653",
"name": "LIVE NATION MUSIC",
"description": "LIVE NATION MUSIC / NTL / USA"
},
"info": "Big Gigantic has always been dedicated to giving back to those in need through their #ABigGiganticDifference Initiative. On this Brighter Future tour, they will continue the #ABigGiganticDifference mission by donating a percentage of ticket sales from each show to a local nonprofit of charity in need in each city. In our city of Huntington, they will be supporting the mission to collect toys for children in need by donating to Toys of Hope. If you'd like more information on Toys of Hope or would like to look into further volunteer or donation options with them, please visit http://www.toysofhope.org/contact_us.html. Thank you for continuing to support their initiative and by purchasing a ticket to this show, you are truly making #ABigGiganticDifference in our city!",
"priceRanges": [
{
"type": "standard",
"currency": "USD",
"min": 25,
"max": 66
}
],
"_links": {
"self": {
"href": "/discovery/v2/events/k7vGFfodZESLi?locale=en-us"
},
"attractions": [
{
"href": "/discovery/v2/attractions/K8vZ917GRLf?locale=en-us"
},
{
"href": "/discovery/v2/attractions/K8vZ9173V70?locale=en-us"
}
],
"venues": [
{
"href": "/discovery/v2/venues/KovZpZAEAEtA?locale=en-us"
}
]
},
"_embedded": {
"venues": [
{
"name": "The Paramount",
"type": "venue",
"id": "KovZpZAEAEtA",
"test": false,
"url": "http://ticketmaster.com/venue/1280",
"locale": "en-us",
"postalCode": "11743",
"timezone": "America/New_York",
"city": {
"name": "Huntington"
},
"state": {
"name": "New York",
"stateCode": "NY"
},
"country": {
"name": "United States Of America",
"countryCode": "US"
},
"address": {
"line1": "370 New York Ave"
},
"location": {
"longitude": "-73.42591099",
"latitude": "40.86969685"
},
"markets": [
{
"id": "35"
},
{
"id": "124"
}
],
"dmas": [
{
"id": 296
},
{
"id": 345
}
],
"social": {
"twitter": {
"handle": "#TheParamountNY"
}
},
"boxOfficeInfo": {
"phoneNumberDetail": "For more information please visit paramountny.com VIP Seating and Packages: Please call 631-673-7300 or visit paramountny.com",
"acceptedPaymentDetail": "Cash, Visa, MasterCard, Discover, Diners Club, & American Express",
"willCallDetail": "Location : Main Lobby Opens : 1 hour prior to show or event"
},
"parkingDetail": "For parking information please visit : paramountny.com",
"accessibleSeatingDetail": "This is an accessible venue.",
"generalInfo": {
"generalRule": "NO cameras NO recording NO outside food or beverages (including alcohol) Backpacks and large bags must must be checked. ALL bags are subject to search. Smoking is NOT permitted",
"childRule": "Everyone needs a ticket to enter"
},
"_links": {
"self": {
"href": "/discovery/v2/venues/KovZpZAEAEtA?locale=en-us"
}
}
}
],
"attractions": [
{
"name": "Big Gigantic",
"type": "attraction",
"id": "K8vZ917GRLf",
"test": false,
"url": "http://ticketmaster.com/artist/1474639",
"locale": "en-us",
"images": [
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_EVENT_DETAIL_PAGE_16_9.jpg",
"width": 205,
"height": 115,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_LARGE_16_9.jpg",
"width": 2048,
"height": 1152,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_LANDSCAPE_16_9.jpg",
"width": 1136,
"height": 639,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_3_2.jpg",
"width": 1024,
"height": 683,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_TABLET_LANDSCAPE_16_9.jpg",
"width": 1024,
"height": 576,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_3_2.jpg",
"width": 640,
"height": 427,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RETINA_PORTRAIT_16_9.jpg",
"width": 640,
"height": 360,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_RECOMENDATION_16_9.jpg",
"width": 100,
"height": 56,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_ARTIST_PAGE_3_2.jpg",
"width": 305,
"height": 203,
"fallback": false
},
{
"ratio": "4_3",
"url": "http://s1.ticketm.net/dam/a/2e6/6c23d561-98d7-4025-b49a-5e20544c52e6_153341_CUSTOM.jpg",
"width": 305,
"height": 225,
"fallback": false
}
],
"classifications": [
{
"primary": true,
"segment": {
"id": "KZFzniwnSyZfZ7v7nJ",
"name": "Music"
},
"genre": {
"id": "KnvZfZ7vAvF",
"name": "Dance/Electronic"
},
"subGenre": {
"id": "KZazBEonSMnZfZ7vAJ1",
"name": "Club Dance"
}
}
],
"_links": {
"self": {
"href": "/discovery/v2/attractions/K8vZ917GRLf?locale=en-us"
}
}
},
{
"name": "Illenium",
"type": "attraction",
"id": "K8vZ9173V70",
"test": false,
"url": "http://ticketmaster.com/artist/2035639",
"locale": "en-us",
"images": [
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RETINA_PORTRAIT_16_9.jpg",
"width": 640,
"height": 360,
"fallback": false
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_ARTIST_PAGE_3_2.jpg",
"width": 305,
"height": 203,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_16_9.jpg",
"width": 1024,
"height": 576,
"fallback": true
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_EVENT_DETAIL_PAGE_16_9.jpg",
"width": 205,
"height": 115,
"fallback": false
},
{
"ratio": "4_3",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_CUSTOM.jpg",
"width": 305,
"height": 225,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_LARGE_16_9.jpg",
"width": 2048,
"height": 1152,
"fallback": true
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RECOMENDATION_16_9.jpg",
"width": 100,
"height": 56,
"fallback": false
},
{
"ratio": "16_9",
"url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_RETINA_LANDSCAPE_16_9.jpg",
"width": 1136,
"height": 639,
"fallback": true
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/c/df8/81eadad8-4449-412e-a2b1-3d8bbb78edf8_106181_TABLET_LANDSCAPE_3_2.jpg",
"width": 1024,
"height": 683,
"fallback": true
},
{
"ratio": "3_2",
"url": "http://s1.ticketm.net/dam/a/9c1/12b833e2-a349-4e59-b02a-9cad62cab9c1_118101_RETINA_PORTRAIT_3_2.jpg",
"width": 640,
"height": 427,
"fallback": false
}
],
"classifications": [
{
"primary": true,
"segment": {
"id": "KZFzniwnSyZfZ7v7nJ",
"name": "Music"
},
"genre": {
"id": "KnvZfZ7vAvF",
"name": "Dance/Electronic"
},
"subGenre": {
"id": "KZazBEonSMnZfZ7vAJ1",
"name": "Club Dance"
}
}
],
"_links": {
"self": {
"href": "/discovery/v2/attractions/K8vZ9173V70?locale=en-us"
}
}
}
]
}
},

You will need to use the inner events array rather than the outer _embedded object. You can do this in one of two ways.
Set the state to hold the inner events array
response.json().then(concerts => this.setState({
concerts: concerts._embedded.events,
// name: Object.values(concerts._embedded.events[0].images[0]),
// image: concerts._embedded.events[0].images[0],
// url: concerts._embedded.events[0].url,
// info: concerts._embedded.events[0].info,
// date: concerts._embedded.events[0].classifications[0].name,
}));
or
Access the inner the inner events array when the state is used
this.state.concerts.events.map((concert) => {
return (
<div>
{concert}
</div>
);
})

jointjs: I want to get the value of label from json text

I want to get the value of text a "Label" and the type with JSON from this JSon text :
{
"cells": [{
"type": "devs.Model",
"size": {
"width": 40,
"height": 40
},
"inPorts": [""],
"outPorts": [""],
"position": {
"x": 168,
"y": 99
},
"angle": 0,
"id": "c7cf7b2d-3b54-4dd1-9cbf-7a37a72559fc",
"z": 1,
"attrs": {
".label": {
"text": "aa",
"ref-x": 0.4,
"ref-y": 0.2
},
"rect": {
"fill": "#2ECC71"
},
".inPorts circle": {
"fill": "#16A085",
"magnet": "active",
"type": "input"
},
".outPorts circle": {
"fill": "#E74C3C",
"type": "output"
},
".inPorts>.port0>.port-label": {
"text": ""
},
".inPorts>.port0>.port-body": {
"port": {
"id": "in8",
"type": "in"
}
},
".inPorts>.port0": {
"ref": ".body",
"ref-y": 0.5
},
".outPorts>.port0>.port-label": {
"text": ""
},
".outPorts>.port0>.port-body": {
"port": {
"id": "out9",
"type": "out"
}
},
".outPorts>.port0": {
"ref": ".body",
"ref-y": 0.5,
"ref-dx": 0
}
}
}, {
"type": "link",
"source": {},
"target": {},
"id": "1e977b11-c003-4c22-ba48-c04994f63c79",
"z": 2,
"attrs": {}
}]
}
For the label , I do : document.write(jsonString.cells[0].attrs.label.text);
and for the type : (jsonString.cells[0].attrs.label.text);
var jsonString = JSON.stringify(graph);
document.write(jsonString.cells[0].type);