I'm trying to get some data from a GraphQL query, but i'm having some trouble.
When i try to map over some JSon data, i can't get data from the arrays inside the data.
I'm not sure what i'm missing.
What i've tried:
This works fine:
<div>
{data.allDataJson.nodes.map(listing => (
<div>
<h2>{listing.name}</h2>
</div>
))}
</div>
but when i try to get the Camere array, i can't access the data.
When i do: it gives me the error
{data.allDataJson.nodes.map(listing => (
<div>
<h2>{listing.name}</h2>
<h2>{listing.camere}</h2>
</div>
))}
Objects are not valid as a React child (found: object with keys {name, amount}). If you meant to render a collection of children, use an array instead.
also this:
<div>
{data.allDataJson.nodes.map(listing => (
<div>
<h2>{listing.name}</h2>
{listing.camere.map(
camere =>
<div>
<h1>{camere.name}</h1>
<h1>{camere.amount}</h1>
</div>
)}
</div>
))}
</div>
When i try to do .map on it like on an array, i get the error in the post title.
My code:
import React from 'react';
import { useStaticQuery, graphql } from "gatsby";
const Listing = () => {
const data = useStaticQuery(graphql`
query ListingQuery {
allDataJson {
nodes {
camere {
name
amount
}
name
}
}
}
`);
return (
<div>
{data.allDataJson.nodes.map(listing => (
<div>
<h2>{listing.name}</h2>
{listing.camere.map(home => <h1>{home.name}</h1>)}
</div>
))}
</div>
);
};
export default Listing;
My data:
[
{
"name":"Vila Franceza",
"detaliipret":{
"pret":"3000lei",
"perioada":"iunie - iulie",
"detaliu1":"Vila se inchiriaza exclusiv integral.",
"detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
},
"detaliidescriere":[
{
"text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
"type":"normal"
},
{
"text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
"type":"normal"
},
{
"text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
"type":"normal"
},
{
"text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
"type":"normal"
},
{
"text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
"type":"normal"
},
{
"text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
"type":"normal"
},
{
"text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
"type":"normal"
},
{
"text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
"type":"normal"
},
{
"text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
"type":"normal"
},
{
"text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei. Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
"type":"normal"
},
{
"text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
"type":"normal"
},
{
"text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
"type":"normal"
}
],
"camere":[
{
"name":"Livingroom deschis",
"amount":1
},
{
"name":"Bucătărie americană",
"amount":1
},
{
"name":"Sală pentru servirea mesei",
"amount":1
},
{
"name":"Ieșire directă pe terasă",
"amount":1
},
{
"name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
"amount":1
},
{
"name":"Dormitor cu jacuzzi",
"amount":1
},
{
"name":"Dormitor VIP cu jacuzzi și pat king size",
"amount":1
},
{
"name":"dormitoare cu pat dublu",
"amount":5
},
{
"name":"salon cu canapea extensibilă dublă",
"amount":1
},
{
"name":"Spațiu de joacă pentru copii",
"amount":1
}
],
"dotari":[
"TV satelit",
"Wi-Fi",
"Sistem de sonorizare stereo profesional",
"Masa de biliard",
"Joc fotbal de masa Babyfoot",
"Doua caiace pentru amatorii de vaslit",
"Saniute pentru sezonul de iarna",
"Semineu cu lemne in living, cu scaune incalzite",
"Incalzire centrala (electrica, pe lemne, pe gaz )",
"Masina de spalat rufe",
"Masina de uscat rufe",
"Fier si masa de calcat",
"Uscatoare de par",
"Gril exterior XXL",
"Disc pentru grătar",
"Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
"Sauna",
"Debarcader privat pentru sporturi nautice",
"Mobilier de plaja",
"Parcare privată",
"Sistem de supraveghere video",
"Plita pe gaz",
"Microunde",
"Prajitor paine",
"Taietor electric",
"Robot de bucatarie",
"Vesela si accesorii pentru 20 de persoane",
"Masina de spalat vase",
"Frigider dublu",
"Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
"Expresor și filtru cafea"
]
},
{
"name":"Casa Pescarilor",
"detaliipret":{
"pret":"800lei",
"perioada":"iunie - iulie",
"detaliu1":"Vila se inchiriaza exclusiv integral.",
"detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
},
"detaliidescriere":[
{
"text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
"type":"normal"
},
{
"text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
"type":"normal"
},
{
"text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
"type":"normal"
},
{
"text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
"type":"normal"
},
{
"text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
"type":"normal"
},
{
"text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
"type":"normal"
},
{
"text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
"type":"normal"
},
{
"text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
"type":"normal"
},
{
"text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
"type":"normal"
},
{
"text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei. Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
"type":"normal"
},
{
"text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
"type":"normal"
},
{
"text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
"type":"normal"
}
],
"camere":[
{
"name":"Livingroom deschis",
"amount":1
},
{
"name":"Bucătărie americană",
"amount":1
},
{
"name":"Sală pentru servirea mesei",
"amount":1
},
{
"name":"Ieșire directă pe terasă",
"amount":1
},
{
"name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
"amount":1
},
{
"name":"Dormitor cu jacuzzi",
"amount":1
},
{
"name":"Dormitor VIP cu jacuzzi și pat king size",
"amount":1
},
{
"name":"dormitoare cu pat dublu",
"amount":5
},
{
"name":"salon cu canapea extensibilă dublă",
"amount":1
},
{
"name":"Spațiu de joacă pentru copii",
"amount":1
}
],
"dotari":[
"TV satelit",
"Wi-Fi",
"Sistem de sonorizare stereo profesional",
"Masa de biliard",
"Joc fotbal de masa Babyfoot",
"Doua caiace pentru amatorii de vaslit",
"Saniute pentru sezonul de iarna",
"Semineu cu lemne in living, cu scaune incalzite",
"Incalzire centrala (electrica, pe lemne, pe gaz )",
"Masina de spalat rufe",
"Masina de uscat rufe",
"Fier si masa de calcat",
"Uscatoare de par",
"Gril exterior XXL",
"Disc pentru grătar",
"Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
"Sauna",
"Debarcader privat pentru sporturi nautice",
"Mobilier de plaja",
"Parcare privată",
"Sistem de supraveghere video",
"Plita pe gaz",
"Microunde",
"Prajitor paine",
"Taietor electric",
"Robot de bucatarie",
"Vesela si accesorii pentru 20 de persoane",
"Masina de spalat vase",
"Frigider dublu",
"Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
"Expresor și filtru cafea"
]
},
{
"name":"Modern Rooms Resort Colibita",
"detaliipret":{
"pret":"450lei",
"perioada":"iunie - iulie",
"detaliu1":"Vila se inchiriaza exclusiv integral.",
"detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
},
"detaliidescriere":[
{
"text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
"type":"normal"
},
{
"text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
"type":"normal"
},
{
"text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
"type":"normal"
},
{
"text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
"type":"normal"
},
{
"text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
"type":"normal"
},
{
"text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
"type":"normal"
},
{
"text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
"type":"normal"
},
{
"text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
"type":"normal"
},
{
"text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
"type":"normal"
},
{
"text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei. Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
"type":"normal"
},
{
"text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
"type":"normal"
},
{
"text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
"type":"normal"
}
],
"camere":[
{
"name":"Livingroom deschis",
"amount":1
},
{
"name":"Bucătărie americană",
"amount":1
},
{
"name":"Sală pentru servirea mesei",
"amount":1
},
{
"name":"Ieșire directă pe terasă",
"amount":1
},
{
"name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
"amount":1
},
{
"name":"Dormitor cu jacuzzi",
"amount":1
},
{
"name":"Dormitor VIP cu jacuzzi și pat king size",
"amount":1
},
{
"name":"dormitoare cu pat dublu",
"amount":5
},
{
"name":"salon cu canapea extensibilă dublă",
"amount":1
},
{
"name":"Spațiu de joacă pentru copii",
"amount":1
}
],
"dotari":[
"TV satelit",
"Wi-Fi",
"Sistem de sonorizare stereo profesional",
"Masa de biliard",
"Joc fotbal de masa Babyfoot",
"Doua caiace pentru amatorii de vaslit",
"Saniute pentru sezonul de iarna",
"Semineu cu lemne in living, cu scaune incalzite",
"Incalzire centrala (electrica, pe lemne, pe gaz )",
"Masina de spalat rufe",
"Masina de uscat rufe",
"Fier si masa de calcat",
"Uscatoare de par",
"Gril exterior XXL",
"Disc pentru grătar",
"Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
"Sauna",
"Debarcader privat pentru sporturi nautice",
"Mobilier de plaja",
"Parcare privată",
"Sistem de supraveghere video",
"Plita pe gaz",
"Microunde",
"Prajitor paine",
"Taietor electric",
"Robot de bucatarie",
"Vesela si accesorii pentru 20 de persoane",
"Masina de spalat vase",
"Frigider dublu",
"Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
"Expresor și filtru cafea"
]
}
]
What i want to be able to do:
Get all the details from all the data.
Do a conditional render.
For readability, add another function to extract names for each camere.
const getNames = (camere) => (camere.map(home => <h1>{home.name}</h1>))
{data.allDataJson.nodes.map(listing => (
<div>
<h2>{listing.name}</h2>
{
listing.camere &&
listing.camere.length > 0 &&
this.getNames(listing.camere)
}
</div>
))}
I have this JSON file with info about a cinema.
"schedule": [
{
"day": "Maandag",
"date": "22/05/2017",
"movies": [
{
"title": "I Am Not Your Negro",
"description": "In deze Belgische coproductie vertrekt Raoul Peck van een onafgewerkte roman van de Afro-Amerikaanse schrijver James Baldwin voor een reis door de zwarte geschiedenis die de Burgerrechtenbeweging uit de jaren zestig verbindt met het huidige #BlackLivesMatter. De tekst, geschreven in 1979, is helaas nog altijd heel actueel en bespreekt een diep geworteld racisme. De film is een treffend betoog op basis van archiefbeelden, filmfragmenten en actuele nieuwsbeelden die aan elkaar gepraat worden door de bezwerende stem van Samuel L. Jackson.",
"img": "negro.jpg",
"room": 1,
"screenings": [
"20:25"
],
"kids":false
},
{
"title": "Lady MacBeth",
"description": "De jonge Katherine leeft Northumberland in 1865. Ze is er gevangene in eigen huis en wordt er door haar sadistische echtgenoot en diens autoritaire vader tot op het bot vernederd. Leven in zo’n liefdeloze wereld moet in deze krachtige kostuumfilm wel tot excessen leiden. Wanneer Katherine een allesverzengende relatie aanknoopt met een knecht gaat het mis. Een indrukwekkende speelfilmdebuut van theater- en operaregisseur William Oldroyd.",
"img": "macbeth.jpg",
"room": 2,
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "Tarde para la Ira",
"description": "Na acht jaar in de gevangenis als gevolg van een misgelopen sieradenroof wil Curro maar één ding: een nieuw leven beginnen met zijn familie. Zijn komst leidt echter tot spanningen bij zijn broer en diens vriendin, die een rustig leventje leiden. Bovendien verandert de ontmoeting met Joseph, een mysterieuze vreemdeling, zijn plannen. Hij komt terecht in een onomkeerbare, donkere reis terug naar het verleden, vol wraak. Deze debuutfilm van acteur Raúl Arévalo won recent 4 Goyas (de Spaanse variant van de Oscar) waaronder die voor Beste Film.",
"room": 3,
"img": "tarde.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
},
{
"day": "Dinsdag",
"date": "23/05/2017",
"movies": [
{
"title": "Django",
"description": "De virtuoze gitarist Django Reinhardt, geboren in een Henegouws dorp, was een Roma. Op het moment dat hij in Parijs concertzalen laat vollopen, vallen de Duitsers Frankrijk binnen. De film focust op de oorlogsjaren van de virtuoze gitarist en zoomt in op zijn poging om naar Zwitserland te vluchten. De aandacht ligt op het droevige lot van de Roma-zigeuners, een bevolkingsgroep die door de nazi’s vervolgd werden, tijdens die oorlogsjaren. De aanstekelijke muziek wordt vertolkt door het Rosenberg Trio.",
"room": 1,
"img": "django.jpg",
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "March of the Penguins 2",
"description": "In March of The Penguins 2 keert regisseur Luc Jacquet terug met een even verbluffend vervolg, en voert de kijker met behulp van drones en onderwatercamera’s mee naar onherbergzame plekken op Antarctica. Ditmaal volgen we een jonge pinguïn die op het punt staat zijn eerste grote reis te maken, vol gevaar en obstakels. Het vervolgverhaal vertelt de lotsbestemming van één pinguïn, wiens krachtige en mysterieuze instincten hem in staat stellen om te overleven.",
"room": 3,
"img": "march.jpg",
"screenings": [
"20:15"
],
"kids":true
},
{
"title": "Their Finest",
"description": "In deze charmante komedie staan twee scenarioschrijvers centraal. Tijdens WOII krijgen ze de opdracht een fictiefilm te maken die het moreel van de Britten moet opschroeven. Tijdens het schrijversproces krijgen ze voortdurend nieuwe richtlijnen van het ministerie van Oorlog om het script aan te passen. Om uiteindelijk de Amerikanen ook over de streep te trekken om deel te nemen aan de oorlog moeten ze de hoofdrol herschrijven met een Amerikaanse held. Een puike verzameling Britse acteurs zijn de kers op de verrukkelijke taart.",
"room": 3,
"img": "finest.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
I want to make a list where I show the dates, so that you can click on it and see the movies on that day.
When I try to do that. It only shows the first date: 22/05/2017. And not the other one: 23/05/2017.
I'm using this code:
{
const createListItems = schedule => {
const $li = document.createElement(`li`);
$li.textContent = `${schedule.date}`;
document.querySelector(`.days`).appendChild($li);
$li.addEventListener(`click`, handleDayClick);
};
const makeListItems = schedule => {
schedule.forEach(date => {
createListItems(date);
});
};
const parse = schedule=> {
makeListItems(schedule);
};
const init = () => {
const jsonFile = `./assets/data/buda.json`;
fetch(jsonFile).then(r => r.json()).then(data => parse(data.schedule));
};
init();
}
Does someone know what I do wrong?
I removed this line of code : $li.addEventListener('click', handleDayClick);
I haven't declared the function handleDayClick yet, so that was the problem.
I want to make a website about a cinema. On one page I want to show a schedule. I want to make a list where you can see the dates and if you click on it, you see the movies that play on that day.
This is my json file with the data:
{
"complex": "Budascoop",
"location": {
"City": "Kortrijk",
"Street": "Dam"
},
"schedule": [
{
"day": "Maandag",
"date": "22/05/2017",
"movies": [
{
"title": "I Am Not Your Negro",
"description": "In deze Belgische coproductie vertrekt Raoul Peck van een onafgewerkte roman van de Afro-Amerikaanse schrijver James Baldwin voor een reis door de zwarte geschiedenis die de Burgerrechtenbeweging uit de jaren zestig verbindt met het huidige #BlackLivesMatter. De tekst, geschreven in 1979, is helaas nog altijd heel actueel en bespreekt een diep geworteld racisme. De film is een treffend betoog op basis van archiefbeelden, filmfragmenten en actuele nieuwsbeelden die aan elkaar gepraat worden door de bezwerende stem van Samuel L. Jackson.",
"img": "negro.jpg",
"room": 1,
"screenings": [
"20:25"
],
"kids":false
},
{
"title": "Lady MacBeth",
"description": "De jonge Katherine leeft Northumberland in 1865. Ze is er gevangene in eigen huis en wordt er door haar sadistische echtgenoot en diens autoritaire vader tot op het bot vernederd. Leven in zo’n liefdeloze wereld moet in deze krachtige kostuumfilm wel tot excessen leiden. Wanneer Katherine een allesverzengende relatie aanknoopt met een knecht gaat het mis. Een indrukwekkende speelfilmdebuut van theater- en operaregisseur William Oldroyd.",
"img": "macbeth.jpg",
"room": 2,
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "Tarde para la Ira",
"description": "Na acht jaar in de gevangenis als gevolg van een misgelopen sieradenroof wil Curro maar één ding: een nieuw leven beginnen met zijn familie. Zijn komst leidt echter tot spanningen bij zijn broer en diens vriendin, die een rustig leventje leiden. Bovendien verandert de ontmoeting met Joseph, een mysterieuze vreemdeling, zijn plannen. Hij komt terecht in een onomkeerbare, donkere reis terug naar het verleden, vol wraak. Deze debuutfilm van acteur Raúl Arévalo won recent 4 Goyas (de Spaanse variant van de Oscar) waaronder die voor Beste Film.",
"room": 3,
"img": "tarde.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
},
{
"day": "Dinsdag",
"date": "23/05/2017",
"movies": [
{
"title": "Django",
"description": "De virtuoze gitarist Django Reinhardt, geboren in een Henegouws dorp, was een Roma. Op het moment dat hij in Parijs concertzalen laat vollopen, vallen de Duitsers Frankrijk binnen. De film focust op de oorlogsjaren van de virtuoze gitarist en zoomt in op zijn poging om naar Zwitserland te vluchten. De aandacht ligt op het droevige lot van de Roma-zigeuners, een bevolkingsgroep die door de nazi’s vervolgd werden, tijdens die oorlogsjaren. De aanstekelijke muziek wordt vertolkt door het Rosenberg Trio.",
"room": 1,
"img": "django.jpg",
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "March of the Penguins 2",
"description": "In March of The Penguins 2 keert regisseur Luc Jacquet terug met een even verbluffend vervolg, en voert de kijker met behulp van drones en onderwatercamera’s mee naar onherbergzame plekken op Antarctica. Ditmaal volgen we een jonge pinguïn die op het punt staat zijn eerste grote reis te maken, vol gevaar en obstakels. Het vervolgverhaal vertelt de lotsbestemming van één pinguïn, wiens krachtige en mysterieuze instincten hem in staat stellen om te overleven.",
"room": 3,
"img": "march.jpg",
"screenings": [
"20:15"
],
"kids":true
},
{
"title": "Their Finest",
"description": "In deze charmante komedie staan twee scenarioschrijvers centraal. Tijdens WOII krijgen ze de opdracht een fictiefilm te maken die het moreel van de Britten moet opschroeven. Tijdens het schrijversproces krijgen ze voortdurend nieuwe richtlijnen van het ministerie van Oorlog om het script aan te passen. Om uiteindelijk de Amerikanen ook over de streep te trekken om deel te nemen aan de oorlog moeten ze de hoofdrol herschrijven met een Amerikaanse held. Een puike verzameling Britse acteurs zijn de kers op de verrukkelijke taart.",
"room": 3,
"img": "finest.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
},
{
"day": "Woensdag",
"date": "24/05/2017",
"movies": [
{
"title": "Dries",
"description": "DRIES brengt een intiem en fascinerend portret van de Vlaamse modeontwerper Dries Van Noten wiens stijl wordt gekenmerkt door warme kleuren, exquise prints en rijke borduursels. Als één van de laatste onafhankelijke modeontwerpers bekleedt hij een unieke positie in het modelandschap. Hij staat al 25 jaar aan de top en heel wat van zijn collecties zijn iconisch te noemen. Van Noten zelf is bekend om zijn soberheid en zijn bescheidenheid, je zal hem niet vaak zien op modefeestjes en hij geeft amper interviews. Voor het eerst laat hij een camera toe in zijn professionele en persoonlijke leven; regisseur Reiner Holzemer volgde Dries Van Noten een jaar lang langsheen de creatie van 4 collecties.",
"room": 1,
"img": "dries.jpg",
"screenings": [
"18:00"
],
"kids":false
},
{
"title": "The Sense of an Ending",
"description": "Tony Webster, een gescheiden en pensioneerde man, leidt een teruggetrokken leven. Wanneer zijn verleden hem plotseling lijkt in te halen, is de rust voorbij. Hij wordt gedwongen de confrontatie aan te gaan met de waarheid over zijn eerste liefde en moet de ondraaglijke gevolgen van zijn beslissingen destijds onder ogen zien. Een verfilming naar het boek van Julian Barnes. Ritesh Batra (The Lunchbox) fileert met humor, wijsheid en een feilloos gevoel hoe een onbedachtzame of verkeerd ingeschatte handeling jouw pad voor altijd kan bepalen.",
"room": 2,
"img": "sense.jpg",
"screenings": [
"18:00",
"20:25"
],
"kids":false
},
{
"title": "After the Storm",
"description": "Ryota won ooit een prijs met zijn eerste roman maar verdient nu zijn brood als detective. Zijn gokverslaving heeft hem vervreemd van zijn ex-vrouw en zijn zoon. Na de dood van zijn vader lijken zijn bejaarde moeder en mooie ex-vrouw door te gaan met hun leven. Wanneer ze op een avond allemaal in het flatje van de oude moeder zitten, barst een tyfoon los. Ryota, zijn ex en zijn zoon kunnen niet anders dan daar te blijven om te schuilen. Een zachtmoedig, melancholisch en - verrassend genoeg - ook grappig relaas van een gescheiden man die opnieuw toenadering zoekt tot zijn vervreemde familie. Koreeda (Like Father, Like Son, Nobody Knows, …) kan als geen ander Japanse familierelaties ontrafelen.",
"room": 3,
"img": "storm.jpg",
"screenings": [
"18:00"
],
"kids":false
},
{
"title": "Tarde para la Ira",
"description": "Na acht jaar in de gevangenis als gevolg van een misgelopen sieradenroof wil Curro maar één ding: een nieuw leven beginnen met zijn familie. Zijn komst leidt echter tot spanningen bij zijn broer en diens vriendin, die een rustig leventje leiden. Bovendien verandert de ontmoeting met Joseph, een mysterieuze vreemdeling, zijn plannen. Hij komt terecht in een onomkeerbare, donkere reis terug naar het verleden, vol wraak. Deze debuutfilm van acteur Raúl Arévalo won recent 4 Goyas (de Spaanse variant van de Oscar) waaronder die voor Beste Film.",
"room": 1,
"img": "tarde.jpg",
"screenings": [
"20:15"
],
"kids":false
},
{
"title": "Their Finest",
"description": "In deze charmante komedie staan twee scenarioschrijvers centraal. Tijdens WOII krijgen ze de opdracht een fictiefilm te maken die het moreel van de Britten moet opschroeven. Tijdens het schrijversproces krijgen ze voortdurend nieuwe richtlijnen van het ministerie van Oorlog om het script aan te passen. Om uiteindelijk de Amerikanen ook over de streep te trekken om deel te nemen aan de oorlog moeten ze de hoofdrol herschrijven met een Amerikaanse held. Een puike verzameling Britse acteurs zijn de kers op de verrukkelijke taart.",
"room": 4,
"img": "finest.jpg",
"screenings": [
"20:15"
],
"kids":false
}
]
}
This is how I make the list with JS:
{
const createListItems = schedule => {
const $li = document.createElement(`li`);
$li.textContent = `${schedule.date}`;
document.querySelector(`.days`).appendChild($li);
$li.addEventListener(`click`, handleDayClick);
};
const makeListItems = schedule => {
schedule.forEach(date => {
createListItems(date);
});
};
const parse = schedule => {
makeListItems(schedule);
};
This is all works out fine, so I continue with the code that I use for if you click on a date:
const handleDayClick = ({currentTarget: $li}) => {
loadFilmData($li);
};
const loadFilmData = $li => {
setActiveElement($li);
fetch(`./assets/data/buda.json`).then(r => r.json()).then(data => parse(parseMovieDetail));
}
const setActiveElement = $li => {
const $old = document.querySelector(`.active`);
if ($old) {
$old.classList.remove(`active`);
}
$li.classList.add(`active`);
}
const parseMovieDetail = date => {
const $container = document.querySelector(`.movies`);
$container.innerHTML = ``;
date.movies.forEach(movie => {
$movieList = document.querySelector(`.movies`);
const $h3 = document.createElement(`h3`);
$h3.textContent = `${movies.title}`;
$movieList.appendChild($h3);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/${movies.img}`);
$img.setAttribute(`width`, 200);
$img.setAttribute(`height`, auto);
$movieList.appendChild($img);
const $p = document.createElement(`p`);
$p.classList.add(`description`);
$p.textContent = `${movies.description}`;
$movieList.appendChild($p);
const $div = document.createElement(`div`);
$div.classList.add(`meta`);
$movieList.appendChild($div);
const $ul = document.createElement(`ul`);
$ul.classList.add(`screenings`);
$div.classList.add($ul)
const $li = document.createElement(`li`);
$li.textContent = `${movies.screenings}`;
$ul.classList.add($li);
const $p2 = document.createElement(`p`);
$p2.textContent = `Zaal ${movies.room}`;
$div.appendChild($p2);
})
};
The problem I have right now if that if I click on a date, it doens't show anything and it give me this error in the console:
Uncaught (in promise) TypeError: schedule.forEach is not a function
I am using Kimonolabs and I want to Embed in my html the result of this JSON structure using jquery and I am new in jquery and javascript, so I did everything given in this tutorial : Tutorial Kimonolabs
{
"name": "CCF blog",
"count": 104,
"frequency": "Weekly",
"version": 1,
"newdata": true,
"lastrunstatus": "success",
"thisversionstatus": "success",
"nextrun": "Tue May 12 2015 19:54:32 GMT+0000 (UTC)",
"thisversionrun": "Tue May 05 2015 19:54:32 GMT+0000 (UTC)",
"results": {
"collection2": [
{
"Date": {
"href": "http://ccf.ma/blog/?p=42",
"text": "April 6, 2015"
},
"Titre": {
"href": "http://ccf.ma/blog/?p=42",
"text": "Le chemin vers la Responsabilité Sociétale des entreprises"
},
"description": "Qu’est-ce que c’est une entreprise RSE ? Est-ce une démarche réservée aux grandes entreprises ? Quels sont les enjeux réels ? Quel est l’état d’esprit ?"
},
{
"Date": {
"href": "http://ccf.ma/blog/?p=30",
"text": "March 20, 2015"
},
"Titre": {
"href": "http://ccf.ma/blog/?p=30",
"text": "Formation continue … quel choix pour quel besoin professionnel ?"
},
"description": "Chacun d’entre nous suit, au cours de sa jeunesse une formation initiale jusqu’au statut universitaire pour s’engager dans le vie active, pourtant, il ne nous tarde de nous poser des questions sur les nouveaux besoins en formation selon nos enjeux professionnelles et notre motivation, soit pour nous convertir, booster notre carrière ou simplement renforcer nos connaissances et compétences."
},
{
"Date": {
"href": "http://ccf.ma/blog/?p=9",
"text": "March 19, 2015"
},
"Titre": {
"href": "http://ccf.ma/blog/?p=9",
"text": "La TPE/ PME marocaine et le mangement par les processus"
},
"description": "Toute entreprise qu’elle soit cliente ou fournisseur a eu recours aux processus. Le management par le processus peut être un choix interne ou dicté par l’environnement externe, cas des clients qui exigent de leurs fournisseurs la mise en place de procédures spécifiques et la tenue d’un registre dédié, justifiant leurs applications."
},
{
"Date": {
"href": "http://ccf.ma/blog/?p=1",
"text": "March 19, 2015"
},
"Titre": {
"href": "http://ccf.ma/blog/?p=1",
"text": "Coacher avec éthique … n’est-ce pas un vrai axe de différentiation ?"
},
"description": "Dès le début des années 2000, la relation de coaching n’apparait plus comme un effet de mode mais comme une pratique en progression, une pratique de plus en plus perçue comme un levier de développement, plutôt qu’une simple aide en cas de difficulté ;"
}
],
I use this jquery Script with a proper html/css structure (foundation) "titre-article". It is my html class and I want to update:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$.ajax({
url:"https://www.kimonolabs.com/api//////?apikey=////////////",
crossDomain: true,
dataType: "jsonp",
success: function (response) {
//Do something with the response
var collection = response.results.collection2;
$(".titre-article").html(collection.Titre.text);
},
error: function (xhr, status) {
//handle errors
}
});
</script>
But nothing seems to work.
The problem is that response.results.collection2 is an array but you are using as a object, you need to an index to access the values in the array
change $(".titre-article").html(collection.Titre.text); to $(".titre-article").html(collection[0].Titre.text);
This will give you the first element in the array
Here is how you can get results
var collection = response.results.collection2[0];
$(".titre-article").html(collection.Titre.text);
I'm trying to append an element to my JSON object. Structure of JSON is as follows:
[
{
"newId": "167249-20",
"title": "El Supremo ordena reabrir la causa por los delitos fiscales de Carlos Fabra",
"created": "2011-12-01T13:22:00+01:00",
"priority": "99999",
"primaryCategoryId": "305",
"summary": "La sala de lo penal de este órgano ha dejado sin efecto el archivo por prescripción de cuatro de los cinco delitos fiscales que se le imputan al expresidente de la Diputación de Castellón.",
"image": "http%3A%2F%2Fwww.heraldo.es%2Fuploads%2Fimagenes%2Frec15%2F_reaperuradelcasofabra9558214_d07227b1.jpg",
"timestamp": "1322742120"
},
{
"newId": "167233-20",
"title": "Victoria Rodríguez y Claire Morel se imponen en el Open de Andorra",
"created": "2011-12-01T13:11:00+01:00",
"priority": "5",
"primaryCategoryId": "307",
"summary": "Las patinadoras del Aramón Jaca y del CETDI, Victoria Rodríguez Long y Claire Morel se impusieron en sus respectivas categorías en el Open de Andorra de Patinaje sobre hielo disputado el pasado fin de semana en la pista de Canillo.",
"image": "",
"timestamp": "1322741460"
}
]
so I want to add and extra attribute (imageLocation) as follows:
[
{
"newId": "167249-20",
"title": "El Supremo ordena reabrir la causa por los delitos fiscales de Carlos Fabra",
"created": "2011-12-01T13:22:00+01:00",
"priority": "99999",
"primaryCategoryId": "305",
"summary": "La sala de lo penal de este órgano ha dejado sin efecto el archivo por prescripción de cuatro de los cinco delitos fiscales que se le imputan al expresidente de la Diputación de Castellón.",
"image": "http%3A%2F%2Fwww.heraldo.es%2Fuploads%2Fimagenes%2Frec15%2F_reaperuradelcasofabra9558214_d07227b1.jpg",
"timestamp": "1322742120",
"imageLocation:" "xxx/xxx/xxx/xxx/xxx/xxx/jpg"
},
{
"newId": "167233-20",
"title": "Victoria Rodríguez y Claire Morel se imponen en el Open de Andorra",
"created": "2011-12-01T13:11:00+01:00",
"priority": "5",
"primaryCategoryId": "307",
"summary": "Las patinadoras del Aramón Jaca y del CETDI, Victoria Rodríguez Long y Claire Morel se impusieron en sus respectivas categorías en el Open de Andorra de Patinaje sobre hielo disputado el pasado fin de semana en la pista de Canillo.",
"image": "",
"timestamp": "1322741460",
"imageLocation:" "xxx/xxx/xxx/xxx/xxx/xxx/jpg"
}
]
If you have parsed your JSON string into javascript object named jsonObj, you can easily loop through collection and add the new property:
for (int i = 0; i<jsonObj.length;i++)
{
var singleItem = jsonObj[0];
singleItem.imageLocation = "http://someUrl/" + singleItem.newId; // example
}
If you then need to get JSON as string, use JSON.stringify(jsonObj).
If you haven't parsed you JSON string to Javascript object, you can do it easily:
var jsonObj = JSON.parse(jsonString);
You've talked about a "JSON object," but my guess is that you're not dealing with strings (JSON), you're actually dealing with the deserialized JavaScript object (and array).
If so, just loop through the array and assign the new property to the objects:
var index;
for (index = 0; index < array.length; ++index) {
array[index].imageLocation = /* ...value here */;
}
...where array is a reference to the array you've quoted in your question.