Map thru nested JSON in Node ES6 not rendering expected formatting - javascript

I am building a photo gallery using a nested JSON file. I want to map through it to create a nicely formatted JavaScript object or at least a smaller JSON file, containing only the text and image.url nodes. My approach has rendered a kind of weird object, not JSON, nor in the format the app wants.
The object that the application wants is like this
export const photos = [
{
src: "https:/app/uploads/medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg",
width: 4,
height: 4,
title: "Gloria and Emilio together at the 1994 ."
},
{
src: "https:/app/uploads/medium__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg",
width: 4,
height: 3,
title: "Former President and CEO Frances Preston and Adolfo Angel (2nd from left) with guests at the 1994 ."
},
{
src: "https:/app/uploads/medium_arrivals1_220673a90f.jpg",
width: 3,
height: 4,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_arrivals2_c5d28f3d2c.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_1_a9ea1a3a7a.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_2_e1cb163862.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
}
];
Here is the source file
{
"image_sets": [
{
"name": " 2022",
"description": "<div class=\"en\">Moments from the 2020 </div>\n<div class=\"sp\">Spanish Subhead here about what comes next</div>",
"meta_key": "22_gallery",
"created_by": 1,
"updated_by": 1,
"created_at": "2022-02-27T21:09:24.000Z",
"updated_at": "2022-03-09T20:10:08.000Z",
"slide_show": null,
"image_with_text": [
{
"text": "Gloria and Emilio together at the 1994 .",
"image": {
"name": "_2021_gallery_Photo-5---1994_#0034.jpg",
"alternativeText": "",
"caption": "Lorem ipsum",
"width": 845,
"height": 800,
"formats": {
"thumbnail": {
"name": "thumbnail__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "thumbnail__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 165,
"height": 156,
"size": 4.1,
"path": null,
"url": "https://app/uploads/thumbnail__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
},
"medium": {
"name": "medium__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 710,
"size": 37.14,
"path": null,
"url": "https://app/uploads/medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
},
"small": {
"name": "small__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "small__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 473,
"size": 20.97,
"path": null,
"url": "https://app/uploads/small__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
}
},
"url": "https://app/uploads/_2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg",
"previewUrl": null,
"provider_metadata": null,
"created_by": 1,
"updated_by": 1,
"created_at": "2021-03-23T22:50:53.000Z",
"updated_at": "2021-03-23T22:50:53.000Z"
}
},
{
"text": "Former President and CEO Frances Preston and Adolfo Angel (2nd from left) with guests at the 1994 .</span>",
"image": {
"name": "_2021_gallery_Photo-2---1994_#0012.jpg",
"alternativeText": "",
"caption": "Lorem ipsum",
"width": 1150,
"height": 800,
"formats": {
"thumbnail": {
"name": "thumbnail__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "thumbnail__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 224,
"height": 156,
"size": 9.34,
"path": null,
"url": "https://app/uploads/thumbnail__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"large": {
"name": "large__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "large__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 1000,
"height": 696,
"size": 95.48,
"path": null,
"url": "https://app/uploads/large__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"medium": {
"name": "medium__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "medium__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 522,
"size": 63.83,
"path": null,
"url": "https://app/uploads/medium__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"small": {
"name": "small__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "small__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 348,
"size": 33.53,
"path": null,
"url": "https://app/uploads/small__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
}
},
"url": "https://app/uploads/_2021_gallery_Photo_2_1994_0012_b7eebae562.jpg",
"previewUrl": null,
"provider_metadata": null,
"created_by": 1,
"updated_by": 1,
"created_at": "2021-03-23T22:48:50.000Z",
"updated_at": "2021-03-26T18:24:50.000Z"
}
}
]
}
]
}
Here is my code
const fs = require('fs')
// IMPORT DATA SET
const source = require('./source.json')
// GRAB ONLY DATA I WANT
const data = source.image_sets[0].image_with_text;
console.log('data is: ' + typeof(data)) // object
// LOOP THROUGH ARRAY
const mydata = data.map((item) => (
`title: ${item.text}, src: ${item.image.url}, width: ${item.image.width}, height: ${item.image.height}`
))
console.log('mydata is: ' + typeof(mydata)) // object
// FORMAT JSON OR OBJ NOTATION
const mystring = JSON.stringify(mydata, null, 4)
console.log('mystring is: ' + typeof(mystring)) // string
// WRITE TO FILE
fs.writeFile('./user.js', mystring, 'utf-8', (err) => {
if (err) {
console.error(err)
} else {
console.log(mystring)
}
})
It is profoundly disappointing that it is neither well formatted JSON or a JavaScript object that I can use. The stringify is not prettifying. Nor are the template literals forming multilines.
This is what I am getting
data is: object
mydata is: object
mystring is: string
[
"title: Emilio together at the 1994 ., src: https://app/uploads/_2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg, width: 845, height: 800",
"title: Former President and eston and Adold from left) with guests at the 1994 .</span>, src: https://app/uploads/_2021_gallery_Photo_2_1994_0012_b7eebae562.jpg, width: 1150, height: 800"
]
Close, but no cigar. I have researched but without success. Thanks if you have the answer.


You'll want to map the items to an object instead of a string:
const mydata = source.image_sets[0].image_with_text.map((item) => ({
title: item.text,
src: item.image.url,
width: item.image.width,
height: item.image.height
}));
// FORMAT JSON OR OBJ NOTATION
const mystring = JSON.stringify(mydata, null, 4)
// WRITE TO FILE
fs.writeFileSync('./user.js', `export const photos = ${mystring};`, 'utf-8');

Related

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data') when display image in vue 3

I am new to vue js but when i try to display image by id on page there is an error Uncaught (in promise) TypeError: Cannot read properties of undefined (read 'data')
EventDetail.vue
<img :src="require(`../../../e-vents api/public${event.cover.data.attributes.formats.medium.url}`)" alt="#"/>
data() {
return {
event: "",
};
},
mounted() {
fetch(`http://localhost:1337/api/events/${this.id}?populate=*`)
.then((res) => res.json())
.then((data) => (this.event = data.data.attributes))
.catch((err) => console.log(err));
},
I managed to display other data by {{ event.title }} but this one is not showing
project structure
Json Data
{
"data": {
"id": 2,
"attributes": {
"title": "Concert",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit consequat diam, quis tristique mi luctus tincidunt..",
"date": "2022-04-02T12:00:00.000Z",
"duration": 4,
"price": "Rp. 500.000",
"createdAt": "2022-03-23T15:01:33.339Z",
"updatedAt": "2022-03-26T15:40:29.023Z",
"publishedAt": "2022-03-23T15:01:34.908Z",
"location": "Jl. Pintu Satu Senayan, Gelora, Kecamatan Tanah Abang, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10270",
"maps": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.3419031479493!2d106.79960821378528!3d-6.218564762636128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f14d30079f01%3A0x2e74f2341fff266d!2sStadion%20Utama%20Gelora%20Bung%20Karno!5e0!3m2!1sid!2sid!4v1648308601225!5m2!1sid!2sid",
"cover": {
"data": {
"id": 1,
"attributes": {
"name": "concert.jpg",
"alternativeText": "concert",
"caption": "concert.jpg",
"width": 1920,
"height": 1280,
"formats": {
"thumbnail": {
"name": "thumbnail_concert.jpg",
"hash": "thumbnail_concert_a354ef139e",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 234,
"height": 156,
"size": 5.15,
"url": "/uploads/thumbnail_concert_a354ef139e.jpg"
},
"large": {
"name": "large_concert.jpg",
"hash": "large_concert_a354ef139e",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 1000,
"height": 667,
"size": 68.26,
"url": "/uploads/large_concert_a354ef139e.jpg"
},
"medium": {
"name": "medium_concert.jpg",
"hash": "medium_concert_a354ef139e",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 750,
"height": 500,
"size": 37.81,
"url": "/uploads/medium_concert_a354ef139e.jpg"
},
"small": {
"name": "small_concert.jpg",
"hash": "small_concert_a354ef139e",
"ext": ".jpg",
"mime": "image/jpeg",
"path": null,
"width": 500,
"height": 333,
"size": 17.85,
"url": "/uploads/small_concert_a354ef139e.jpg"
}
},
"hash": "concert_a354ef139e",
"ext": ".jpg",
"mime": "image/jpeg",
"size": 281.82,
"url": "/uploads/concert_a354ef139e.jpg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-03-25T08:53:49.295Z",
"updatedAt": "2022-03-25T08:53:49.295Z"
}
}
}
}
},
when console.log looks like this

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"
}
}
.........

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

Onsen angular js api call

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

Categories