Onsen angular js api call - javascript

I dont know if this is an angular js problem. Anyway, I am using onsen ui for my mobile app and I need a way to transition from one page to another and have the data shared between those pages .below is my app.js code.
// Wordpress Posts Controller
var app = angular.module('myApp', []);
app.controller('PostsController', function($scope, $http, PostsData) {
$http({method: 'GET', url: 'http://akufoaddo2016.com/api/get_recent_posts/'}).
success(function(data, status, headers, config) {
$scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
});
$scope.showDetail = function(index) {
var selectedItem = $scope.posts[index];
PostsData.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('page4.html', selectedItem);
}
});
The page i want to show the data on is page4.html and the code is below.
<ons-page ng-controller="PostsController">
<ons-toolbar style="background-color: #132e42" >
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="ion-android-more-vertical" style="color: #fff"></ons-icon></ons-toolbar-button>
</div>
<div class="center" style="font-weight:bold; color:#fff;">Nana Akuffu Addo</div>
</ons-toolbar>
<ons-scroller>
<div ng-app="myApp" ng-repeat="post in posts">
<ons-row >
<h3 class="title" ng-click="showDetail($index)">{{post.title}}</h3>
<p>{{post.excerpt}}</p>
</ons-row>
</div>
</ons-scroller>
</ons-page>
I dont know what i am doing wrong ; it just wont print any value .
If you are wondering how the json data looks like :
{
"count": 2,
"status": "ok",
"count_total": 2,
"pages": 1,
"posts": [
{
"id": 4,
"type": "post",
"slug": "nana-akufo-addo-visits-pentecost-convention-centre",
"url": "http://akufoaddo2016.com/2016/01/17/nana-akufo-addo-visits-pentecost-convention-centre/",
"status": "publish",
"title": "NANA AKUFO – ADDO VISITS PENTECOST CONVENTION CENTRE",
"title_plain": "NANA AKUFO – ADDO VISITS PENTECOST CONVENTION CENTRE",
"content": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa. Read more</p>\n",
"excerpt": "<p>The Presidential Candidate of the New Patriotic Party (NPP) for the 2016 elections, Nana Addo Dankwa Akufo-Addo, on Friday, January 15, 2016 made a historic visit to the ultra-modern Pentecost Convention Centre (PCC) located at Gomoa Fetteh, near Kasoa.</p>\n",
"date": "2016-01-17 23:56:42",
"modified": "2016-01-17 23:56:42",
"categories": [
{
"id": 2,
"slug": "blog",
"title": "Blog",
"description": "",
"parent": 0,
"post_count": 1
}
],
"tags": [],
"author": {
"id": 1,
"slug": "admin",
"name": "admin",
"first_name": "",
"last_name": "",
"nickname": "admin",
"url": "",
"description": ""
},
"comments": [],
"attachments": [
{
"id": 5,
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"slug": "akufoaddo-pentecost-jan16",
"title": "akufoaddo-pentecost-jan16",
"description": "",
"caption": "",
"parent": 4,
"mime_type": "image/jpeg",
"images": {
"full": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
"width": 150,
"height": 150
},
"medium": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
"width": 300,
"height": 233
},
"medium_large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"post-thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
}
}
}
],
"comment_count": 0,
"comment_status": "open",
"thumbnail": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"custom_fields": {},
"thumbnail_size": "post-thumbnail",
"thumbnail_images": {
"full": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-150x150.jpg",
"width": 150,
"height": 150
},
"medium": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16-300x233.jpg",
"width": 300,
"height": 233
},
"medium_large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"large": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
},
"post-thumbnail": {
"url": "http://akufoaddo2016.com/wp-content/uploads/2016/01/akufoaddo-pentecost-jan16.jpg",
"width": 430,
"height": 334
}
}
},
{
"id": 1,
"type": "post",
"slug": "hello-world",
"url": "http://akufoaddo2016.com/2016/01/13/hello-world/",
"status": "publish",
"title": "Hello world!",
"title_plain": "Hello world!",
"content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"date": "2016-01-13 21:24:36",
"modified": "2016-01-13 21:24:36",
"categories": [],
"tags": [],
"author": {
"id": 1,
"slug": "admin",
"name": "admin",
"first_name": "",
"last_name": "",
"nickname": "admin",
"url": "",
"description": ""
},
"comments": [
{
"id": 1,
"name": "Mr WordPress",
"url": "https://wordpress.org/",
"date": "2016-01-13 21:24:36",
"content": "<p>Hi, this is a comment.<br />\nTo delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.</p>\n",
"parent": 0
}
],
"attachments": [],
"comment_count": 1,
"comment_status": "open",
"custom_fields": {}
}
]
}
Thanks for your help.


When you push some data from one controller to another, it will be saved in the navigator.getCurrentPage().options object, so something like that should work.
angular.module('app').controller('FirstController', function ($scope, $http) {
// .. get myData somehow from the page
navi.pushPage('second-page.html', {myData: myData});
}
angular.module('app').controller('SecondController', function ($scope, $http) {
// read the data that that was given by pushPage
$scope.data = navi.getCurrentPage().options.myData;
}

Related

How can I take the data from choiceSet in adaptive cards

I want the data (i.e value inside choices array) inside the red choiseSet when selected and clicked on the btn, I kept an image and added action submit as action.submit as that's my usecase, I am pretty much confused how I can do that, Here's the card payload
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Input.ChoiceSet",
"id": "myColor2",
"style": "expanded",
"value": "1",
"choices": [
{
"title": "Red",
"value": "1"
}
]
},
{
"type": "Image",
"altText": "it's a image",
"url": "https://media.istockphoto.com/vectors/bhutanese-ngultrum-btn-vector-id1304476894",
"width": "100px",
"height": "100px",
"horizontalAlignment": "Left",
"selectAction": {
"type": "Action.Submit",
"id": "btn",
"title": "btn"
}
}
]
}

Once submitted by clicking on the icon, the bot should receive an activity of type message but with no text. The data you want is in the value property.
{
"activity": {
"channelData": {
"postBack": true,
"clientActivityID": "<REMOVED>",
"clientTimestamp": "2022-04-05T18:43:17.348Z"
},
"type": "message",
"value": {
"myColor2": "1"
},
"channelId": "emulator",
"from": {
"id": "<REMOVED>",
"name": "",
"role": "user"
},
"locale": "en-us",
"localTimestamp": "2022-04-05T11:43:17-07:00",
"localTimezone": "America/Los_Angeles",
"timestamp": "2022-04-05T18:43:17.408Z",
"id": "<REMOVED>",
"recipient": {
"id": "<REMOVED>",
"name": "Bot",
"role": "bot"
},
"conversation": {
"id": "<REMOVED>"
},
"serviceUrl": "http://localhost:3212"
},
"id": "<REMOVED>",
"timestamp": 1649184197408
}

Strapi.io filter data by date

I'm trying to deep filter API response from Strapi backend from a custom controller with entityService, but seems like I'm doing something wrong.
According to the documentation:
Strapi filter data
I can have multiple conditions there.
Strapi Version: 4.0.0
Operating System: macOS
Database: postgresql 14
Node Version: v14.17.6
NPM Version: 7.21.1
Yarn Version: 1.22.17
My controller code:
"use strict";
/**
* occasion controller
*/
const { createCoreController } = require("#strapi/strapi").factories;
const date = new Date().toLocaleString("en-US", {
timeZone: "America/Los_Angeles",
});
const dateClean = date.slice(0, 10).split("/");
const dateISOCompat = [dateClean[2], dateClean[0], dateClean[1]].join("-");
module.exports = createCoreController(
"api::occasion.occasion",
({ strapi }) => ({
async find(ctx) {
const { query } = ctx.params;
const entity = await strapi.entityService.findMany(
"api::occasion.occasion",
{
...query,
populate: {
image: true,
button: true,
category: true,
},
filters: {
$and: [
{
publishedAt: {
$notNull: true,
},
$and: [
{
category: {
startDate: {
$lt: dateISOCompat,
},
},
category: {
endDate: {
$gt: dateISOCompat,
},
},
},
],
},
],
},
}
);
return entity;
},
})
);
Date comparison should work I think, my assumption that something wrong with the syntax of filter deep nested conditions.
I still can get data from the API endpoint, but it didn't check for the date range...
My response looks like this:
[
{
"id": 1,
"title": "Are you choosing a cake for the most important event in your life?",
"subtitle": "",
"createdAt": "2021-12-09T23:49:24.518Z",
"updatedAt": "2021-12-30T20:59:28.264Z",
"publishedAt": "2021-12-30T20:59:28.261Z",
"image": {
"id": 10,
"name": "WeddingDate.jpg",
"alternativeText": "WeddingDate.jpg",
"caption": "WeddingDate.jpg",
"width": 2000,
"height": 1335,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_Wedding_Date_6c9d20762c.jpg",
"hash": "large_Wedding_Date_6c9d20762c",
"mime": "image/jpeg",
"name": "large_WeddingDate.jpg",
"path": null,
"size": 125.61,
"width": 1000,
"height": 668
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_Wedding_Date_6c9d20762c.jpg",
"hash": "small_Wedding_Date_6c9d20762c",
"mime": "image/jpeg",
"name": "small_WeddingDate.jpg",
"path": null,
"size": 43.24,
"width": 500,
"height": 334
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_Wedding_Date_6c9d20762c.jpg",
"hash": "medium_Wedding_Date_6c9d20762c",
"mime": "image/jpeg",
"name": "medium_WeddingDate.jpg",
"path": null,
"size": 79.71,
"width": 750,
"height": 501
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_Wedding_Date_6c9d20762c.jpg",
"hash": "thumbnail_Wedding_Date_6c9d20762c",
"mime": "image/jpeg",
"name": "thumbnail_WeddingDate.jpg",
"path": null,
"size": 12.95,
"width": 234,
"height": 156
}
},
"hash": "Wedding_Date_6c9d20762c",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 383.44,
"url": "/uploads/Wedding_Date_6c9d20762c.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2021-12-09T19:34:37.053Z",
"updatedAt": "2021-12-09T19:34:37.053Z"
},
"button": {
"id": 1,
"text": "Order Now",
"buttonURL": "/products/",
"style": "Fill"
},
"category": {
"id": 1,
"name": "Regular Occasions",
"startDate": "2022-01-01",
"endDate": "2024-12-31",
"createdAt": "2021-12-09T23:49:59.083Z",
"updatedAt": "2021-12-09T23:56:21.637Z",
"publishedAt": "2021-12-09T23:55:11.891Z"
}
},
{
"id": 2,
"title": "Make your birthday unforgettable and bright!",
"subtitle": "",
"createdAt": "2021-12-09T23:53:15.734Z",
"updatedAt": "2021-12-22T22:06:15.962Z",
"publishedAt": "2021-12-09T23:54:55.136Z",
"image": {
"id": 3,
"name": "birthday_hero.jpg",
"alternativeText": "birthday_hero.jpg",
"caption": "birthday_hero.jpg",
"width": 1600,
"height": 1066,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_birthday_hero_af457271ec.jpg",
"hash": "large_birthday_hero_af457271ec",
"mime": "image/jpeg",
"name": "large_birthday_hero.jpg",
"path": null,
"size": 56.99,
"width": 1000,
"height": 666
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_birthday_hero_af457271ec.jpg",
"hash": "small_birthday_hero_af457271ec",
"mime": "image/jpeg",
"name": "small_birthday_hero.jpg",
"path": null,
"size": 20.62,
"width": 500,
"height": 333
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_birthday_hero_af457271ec.jpg",
"hash": "medium_birthday_hero_af457271ec",
"mime": "image/jpeg",
"name": "medium_birthday_hero.jpg",
"path": null,
"size": 37.06,
"width": 750,
"height": 500
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_birthday_hero_af457271ec.jpg",
"hash": "thumbnail_birthday_hero_af457271ec",
"mime": "image/jpeg",
"name": "thumbnail_birthday_hero.jpg",
"path": null,
"size": 6.63,
"width": 234,
"height": 156
}
},
"hash": "birthday_hero_af457271ec",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 108.92,
"url": "/uploads/birthday_hero_af457271ec.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2021-12-09T19:34:35.479Z",
"updatedAt": "2021-12-09T19:34:35.479Z"
},
"button": {
"id": 2,
"text": "Order Now",
"buttonURL": "/products/",
"style": "Fill"
},
"category": {
"id": 1,
"name": "Regular Occasions",
"startDate": "2022-01-01",
"endDate": "2024-12-31",
"createdAt": "2021-12-09T23:49:59.083Z",
"updatedAt": "2021-12-09T23:56:21.637Z",
"publishedAt": "2021-12-09T23:55:11.891Z"
}
},
{
"id": 3,
"title": "How to Express Words of Love on Father's Day?",
"subtitle": "",
"createdAt": "2021-12-10T00:01:49.722Z",
"updatedAt": "2021-12-22T22:06:10.665Z",
"publishedAt": "2021-12-10T00:13:18.089Z",
"image": {
"id": 15,
"name": "FathersDay.jpg",
"alternativeText": "FathersDay.jpg",
"caption": "FathersDay.jpg",
"width": 1600,
"height": 664,
"formats": {
"large": {
"ext": ".jpg",
"url": "/uploads/large_Fathers_Day_7020aae6a3.jpg",
"hash": "large_Fathers_Day_7020aae6a3",
"mime": "image/jpeg",
"name": "large_FathersDay.jpg",
"path": null,
"size": 22.33,
"width": 1000,
"height": 415
},
"small": {
"ext": ".jpg",
"url": "/uploads/small_Fathers_Day_7020aae6a3.jpg",
"hash": "small_Fathers_Day_7020aae6a3",
"mime": "image/jpeg",
"name": "small_FathersDay.jpg",
"path": null,
"size": 8.88,
"width": 500,
"height": 208
},
"medium": {
"ext": ".jpg",
"url": "/uploads/medium_Fathers_Day_7020aae6a3.jpg",
"hash": "medium_Fathers_Day_7020aae6a3",
"mime": "image/jpeg",
"name": "medium_FathersDay.jpg",
"path": null,
"size": 15.33,
"width": 750,
"height": 311
},
"thumbnail": {
"ext": ".jpg",
"url": "/uploads/thumbnail_Fathers_Day_7020aae6a3.jpg",
"hash": "thumbnail_Fathers_Day_7020aae6a3",
"mime": "image/jpeg",
"name": "thumbnail_FathersDay.jpg",
"path": null,
"size": 3.45,
"width": 245,
"height": 102
}
},
"hash": "Fathers_Day_7020aae6a3",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 41.41,
"url": "/uploads/Fathers_Day_7020aae6a3.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2021-12-10T00:13:06.981Z",
"updatedAt": "2021-12-10T00:13:06.981Z"
},
"button": {
"id": 3,
"text": "Order Now",
"buttonURL": "/products/",
"style": "Fill"
},
"category": {
"id": 3,
"name": "Father's Day",
"startDate": "2022-06-01",
"endDate": "2022-06-19",
"createdAt": "2021-12-10T00:03:52.295Z",
"updatedAt": "2021-12-10T00:03:53.286Z",
"publishedAt": "2021-12-10T00:03:53.283Z"
}
}
.........

How do i hyperlink a url in the json to the text inside the same JSON using AngularJS

I have a JSON structure as below:
[
{
"_id": "0",
"_rev": "1",
"url": "fb.com",
"ownership": {
"line": "social"
},
"id": 13,
"hierarchies": [
{
"level": 30,
"level40_desc": "",
"pairing": "6950-9X",
"level30_desc": "facebook",
"level30_id": "6941-0P",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-0P"
}
]
},
{
"_id": "02ad9973a97f82db1c",
"_rev": "1-8788cdde1205ca608a3",
"url": "www.google.com",
"ownership": {
"line": "social"
},
"id": 159,
"hierarchies": [
{
"level": 30,
"level40_desc": "",
"pairing": "6950-9L",
"level30_desc": "google",
"level30_id": "6941-9L",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-9L"
}
]
},
{
"_id": "01c555f2333a97f82e837",
"_rev": "1-0101ae7cc842f43c9a40",
"url": "www.twitter.com",
"ownership": {
"line": "social"
},
"id": 14,
"hierarchies": [
{
"level": 30,
"level40_desc": "",
"pairing": "6950-8M",
"level30_desc": "twitter",
"level30_id": "6941-8M",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-8M"
}
]
}
]
In controller I have this JSON to be in vm.searchData, there by in HTML display I'm displaying the data as
<div ng-repeat="item in vm.searchData track by $index">
<div id="{{item.url}}">
<a class="search-results" href="" ui-sref="." ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a>
</div>
</div>
If I want to hyperlink the displayed element with the URL available in the JSON and clicking on hyperlink should open in a new Tab... How would I achieve this

Assign the URL to the href attribute using the ng-href directive, and specify target as _blank to open the link in new tab:
<a class="search-results" ng-href="//{{item.url}}" target="_blank" ng-repeat ...
Just remember to remove ui-sref from the a tags as it may overwrite the URLs with UI router's state URLs. Additionally, since the URLs are without protocol in your data, it will be beneficial precede them with // to make them absolute.
Working demo:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.searchData = [{
"_id": "0",
"_rev": "1",
"url": "fb.com",
"ownership": {
"line": "social"
},
"id": 13,
"hierarchies": [{
"level": 30,
"level40_desc": "",
"pairing": "6950-9X",
"level30_desc": "facebook",
"level30_id": "6941-0P",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-0P"
}]
},
{
"_id": "02ad9973a97f82db1c",
"_rev": "1-8788cdde1205ca608a3",
"url": "www.google.com",
"ownership": {
"line": "social"
},
"id": 159,
"hierarchies": [{
"level": 30,
"level40_desc": "",
"pairing": "6950-9L",
"level30_desc": "google",
"level30_id": "6941-9L",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-9L"
}]
},
{
"_id": "01c555f2333a97f82e837",
"_rev": "1-0101ae7cc842f43c9a40",
"url": "www.twitter.com",
"ownership": {
"line": "social"
},
"id": 14,
"hierarchies": [{
"level": 30,
"level40_desc": "",
"pairing": "6950-8M",
"level30_desc": "twitter",
"level30_id": "6941-8M",
"mirror": "",
"level17_id": "1CMA",
"fin_div": "M3",
"id": "6941-8M"
}]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in searchData track by $index">
<div id="{{item.url}}">
<a class="search-results" ng-href="//{{item.url}}" ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a></div>
</div>
</div>

upload video to vimeo with url

I am new in vimeo. I am just uploading the video to vimeo using link. The API gives me success and video is also uploaded to vimeo, but the video is not playing and says it is corrupted. Here is reference url:
https://github.com/websemantics/vimeo-upload
This is the code:
me.prototype.upload = function() {
var xhr = new XMLHttpRequest()
xhr.open(this.httpMethod, this.url, true)
xhr.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.4')
xhr.setRequestHeader('Authorization', 'bearer xxxxxxxxxxxxxxx')
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onload = function(e) {
// get vimeo upload url, user (for available quote), ticket id and complete url
if (e.target.status < 400) {
var response = JSON.parse(e.target.responseText)
this.url = response.upload_link_secure
this.user = response.user
this.ticket_id = response.ticket_id
this.complete_url = defaults.api_url + response.complete_uri
// this.sendFile_()
} else {
this.onUploadError_(e)
}
}.bind(this)
xhr.onerror = this.onUploadError_.bind(this)
xhr.send(JSON.stringify({
"upload.approach" : "pull",
"upload.link" : "https://vimeo.com/6370469"
}))
}
The Response:
{
"uri": "/videos/267944773",
"name": "Untitled",
"description": null,
"link": "https://vimeo.com/267944773",
"duration": 0,
"width": 400,
"language": null,
"height": 300,
"embed": {
"uri": null,
"html": "<iframe src=\"https://player.vimeo.com/video/267944773?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=125909\" width=\"400\" height=\"300\" frameborder=\"0\" title=\"Untitled\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>",
"buttons": {
"like": true,
"watchlater": true,
"share": true,
"embed": true,
"hd": false,
"fullscreen": true,
"scaling": true
},
"logos": {
"vimeo": true,
"custom": {
"active": false,
"link": null,
"sticky": false
}
},
"title": {
"name": "user",
"owner": "user",
"portrait": "user"
},
"playbar": true,
"volume": true,
"speed": false,
"color": "00adef"
},
"created_time": "2018-05-04T05:15:07+00:00",
"modified_time": "2018-05-04T05:15:07+00:00",
"release_time": "2018-05-04T05:15:07+00:00",
"content_rating": [
"unrated"
],
"license": null,
"privacy": {
"view": "anybody",
"embed": "public",
"download": true,
"add": true,
"comments": "anybody"
},
"pictures": {
"uri": null,
"active": false,
"type": "default",
"sizes": [
{
"width": 100,
"height": 75,
"link": "https://i.vimeocdn.com/video/default_100x75?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_100x75&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 200,
"height": 150,
"link": "https://i.vimeocdn.com/video/default_200x150?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_200x150&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 295,
"height": 166,
"link": "https://i.vimeocdn.com/video/default_295x166?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 640,
"height": 480,
"link": "https://i.vimeocdn.com/video/default_640x480?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_640x480&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 960,
"height": 720,
"link": "https://i.vimeocdn.com/video/default_960x720?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_960x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 1280,
"height": 960,
"link": "https://i.vimeocdn.com/video/default_1280x960?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_1280x960&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 1920,
"height": 1440,
"link": "https://i.vimeocdn.com/video/default_1920x1440?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2Fdefault_1920x1440&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
}
],
"resource_key": "7a491d0e8cad256a8ac2fd6d207e647c1b034bad"
},
"tags": [],
"stats": {
"plays": 0
},
"categories": [],
"metadata": {
"connections": {
"comments": {
"uri": "/videos/267944773/comments",
"options": [
"GET",
"POST"
],
"total": 0
},
"credits": {
"uri": "/videos/267944773/credits",
"options": [
"GET",
"POST"
],
"total": 1
},
"likes": {
"uri": "/videos/267944773/likes",
"options": [
"GET"
],
"total": 0
},
"pictures": {
"uri": "/videos/267944773/pictures",
"options": [
"GET",
"POST"
],
"total": 0
},
"texttracks": {
"uri": "/videos/267944773/texttracks",
"options": [
"GET",
"POST"
],
"total": 0
},
"related": null,
"recommendations": {
"uri": "/videos/267944773/recommendations",
"options": [
"GET"
]
}
},
"interactions": {
"watchlater": {
"uri": "/users/84634686/watchlater/267944773",
"options": [
"GET",
"PUT",
"DELETE"
],
"added": false,
"added_time": null
},
"report": {
"uri": "/videos/267944773/report",
"options": [
"POST"
],
"reason": [
"pornographic",
"harassment",
"advertisement",
"ripoff",
"incorrect rating",
"spam"
]
}
}
},
"user": {
"uri": "/users/84634686",
"name": "Lovey Singh",
"link": "https://vimeo.com/user84634686",
"location": null,
"bio": null,
"created_time": "2018-05-02T16:27:31+00:00",
"account": "basic",
"pictures": {
"uri": "/users/84634686/pictures/25155707",
"active": true,
"type": "custom",
"sizes": [
{
"width": 30,
"height": 30,
"link": "https://i.vimeocdn.com/portrait/25155707_30x30"
},
{
"width": 75,
"height": 75,
"link": "https://i.vimeocdn.com/portrait/25155707_75x75"
},
{
"width": 100,
"height": 100,
"link": "https://i.vimeocdn.com/portrait/25155707_100x100"
},
{
"width": 300,
"height": 300,
"link": "https://i.vimeocdn.com/portrait/25155707_300x300"
},
{
"width": 72,
"height": 72,
"link": "https://i.vimeocdn.com/portrait/25155707_72x72"
},
{
"width": 144,
"height": 144,
"link": "https://i.vimeocdn.com/portrait/25155707_144x144"
},
{
"width": 216,
"height": 216,
"link": "https://i.vimeocdn.com/portrait/25155707_216x216"
},
{
"width": 288,
"height": 288,
"link": "https://i.vimeocdn.com/portrait/25155707_288x288"
},
{
"width": 360,
"height": 360,
"link": "https://i.vimeocdn.com/portrait/25155707_360x360"
}
],
"resource_key": "7268675b46b5f07155d35ffaf0cfc98ae4d3a38b"
},
"websites": [],
"metadata": {
"connections": {
"albums": {
"uri": "/users/84634686/albums",
"options": [
"GET"
],
"total": 0
},
"appearances": {
"uri": "/users/84634686/appearances",
"options": [
"GET"
],
"total": 0
},
"categories": {
"uri": "/users/84634686/categories",
"options": [
"GET"
],
"total": 0
},
"channels": {
"uri": "/users/84634686/channels",
"options": [
"GET"
],
"total": 0
},
"feed": {
"uri": "/users/84634686/feed",
"options": [
"GET"
]
},
"followers": {
"uri": "/users/84634686/followers",
"options": [
"GET"
],
"total": 0
},
"following": {
"uri": "/users/84634686/following",
"options": [
"GET"
],
"total": 0
},
"groups": {
"uri": "/users/84634686/groups",
"options": [
"GET"
],
"total": 0
},
"likes": {
"uri": "/users/84634686/likes",
"options": [
"GET"
],
"total": 0
},
"moderated_channels": {
"uri": "/users/84634686/channels?filter=moderated",
"options": [
"GET"
],
"total": 0
},
"portfolios": {
"uri": "/users/84634686/portfolios",
"options": [
"GET"
],
"total": 0
},
"videos": {
"uri": "/users/84634686/videos",
"options": [
"GET"
],
"total": 1
},
"watchlater": {
"uri": "/users/84634686/watchlater",
"options": [
"GET"
],
"total": 0
},
"shared": {
"uri": "/users/84634686/shared/videos",
"options": [
"GET"
],
"total": 0
},
"pictures": {
"uri": "/users/84634686/pictures",
"options": [
"GET",
"POST"
],
"total": 1
},
"watched_videos": {
"uri": "/me/watched/videos",
"options": [
"GET"
],
"total": 0
},
"block": {
"uri": "/me/block",
"options": [
"GET"
],
"total": 0
}
}
},
"preferences": {
"videos": {
"privacy": {
"view": "anybody",
"comments": "anybody",
"embed": "public",
"download": true,
"add": true
}
}
},
"content_filter": [
"language",
"drugs",
"violence",
"nudity",
"safe",
"unrated"
],
"upload_quota": {
"space": {
"free": 524288000,
"max": 524288000,
"used": 0,
"showing": "periodic"
},
"periodic": {
"free": 524288000,
"max": 524288000,
"used": 0,
"reset_date": "2018-05-06T01:15:08-04:00"
},
"lifetime": {
"free": 5368709120,
"max": 5368709120,
"used": 0
}
},
"resource_key": "b03345ba2b5759492fad56d5a297636905a40336"
},
"review_page": null,
"last_user_action_event_date": null,
"app": {
"name": "golfApi",
"uri": "/apps/125909"
},
"status": "uploading",
"resource_key": "c521dbdfa3c0ffa20a963a760a4895bd4f174e48",
"upload": {
"status": "in_progress",
"upload_link": "https://1512435765.cloud.vimeo.com/upload?ticket_id=147907192&video_file_id=993214879&signature=9078eeb13ddbce78ea210f50f8a58237&v6=1&redirect_url=https%3A%2F%2Fvimeo.com%2Fupload%2Fapi%3Fvideo_file_id%3D993214879%26app_id%3D125909%26ticket_id%3D147907192%26signature%3D2f9faa44050984f217c818e80ccbcb66619fd917",
"form": "<form method=\"POST\" action=\"https://1512435765.cloud.vimeo.com/upload?ticket_id=147907192&video_file_id=993214879&signature=9078eeb13ddbce78ea210f50f8a58237&v6=1&redirect_url=https%3A%2F%2Fvimeo.com%2Fupload%2Fapi%3Fvideo_file_id%3D993214879%26app_id%3D125909%26ticket_id%3D147907192%26signature%3D2f9faa44050984f217c818e80ccbcb66619fd917\" enctype=\"multipart/form-data\">\n<label for=\"file\">File:</label>\n<input type=\"file\" name=\"file_data\" id=\"file\"><br>\n<input type=\"submit\" name=\"submit\" value=\"Submit\">\n</form>",
"complete_uri": null,
"approach": "post",
"size": null,
"redirect_url": null,
"link": null
},
"transcode": {
"status": "in_progress"
}
}
Please help me to sort out this problem.

The upload.link value you provide must be a direct link to a video file resource, not a web page.
For example, you provided:
"upload.link":"https://vimeo.com/6370469"
You'll want to use a direct link to a video file like this:
"upload.link":"http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_surround-fix.avi"
(this is a link to an SD version of the open source film Big Buck Bunny, commonly used for testing)
Vimeo API pull upload documentation is found here: https://developer.vimeo.com/api/upload/videos#using-the-pull-approach

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>
);
})

Categories