Develop Reference

List item Error '1 is not a function' in react-native

I am using List from 'react-native-paper' to display an order list. when I click on the order, 'displays the order total and the products.
I added:
left = {product.quantity}
so that on the left of the products I have the quantity of the products displayed.
However, this line gives me an error:
TypeError: 1 is not a function (near '... left ...')
My data array looks like this:
[ Object {
"amount": 2671.25,
"balance": 0,
"client_id": 1,
"created_at": "2020-05-06T17:42:26Z",
"discount": 0,
"discount_type": 0,
"id": 19,
"items": Array [
Object {
"cost": 2400,
"currency": "EUR",
"description": "",
"name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
"product_id": 5,
"quantity": 1,
"tax_rate_id": 1,
},
Object {
"cost": 54.25,
"currency": "EUR",
"description": "L’agrafeuse pince Rapid Maxi SP19 est conçue pour agrafer tous vos documents en toute simplicité. Ce modèle est capable d’agrafer jusqu’à 20 feuilles en une seule fois. Léger, il assure une prise en main agréable et facile. Robuste, cette agrafeuse convient à un usage fréquent pour les travaux d’emballage et de bureau. Elle peut contenir jusqu’à 210 agrafes SP19/6. Pratique, le stock d’agrafes est visible sur le côté pour que vous puissiez recharger l’agrafeuse à temps. Le chargement s'effectue facilement par l’arrière. Cet article est disponible en deux couleurs : chrome et rose. Il est livré avec 200 agrafes.",
"name": "Agrafeuse pince Rapid Maxi SP 19 – capacité de 20 feuilles",
"product_id": 2,
"quantity": 5,
"tax_rate_id": 4,
},
],
"po_number": "",
"public_notes": "TEST 6 : Acomptes",
"quote_date": "2020-05-06",
"quote_number": "D1460019",
"quote_status": 40,
"terms": "",
"updated_at": "2020-05-06T18:08:06Z", },
I hope you can guide me to find out what is wrong. Thank you And this is my code;
<ScrollView>
{this.state.displayArray !== null && this.state.displayArray.length > 0 ? (
this.state.displayArray.map((item, i) => (
<List.Section title={item.created_at.substring(0, 10)} titleStyle={{fontSize: 16, color: '#013243'}} key={i.toString()}>
<List.Accordion
title={item.quote_number}
style={{width: '98%'}}
left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo-weecoop.png')} />}>
<List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
{
item.items.map((product, i) => (
<List.Item
title={product.name.substring(0, 30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={product.quantity}
/>
))
}
</List.Accordion>
</List.Section>
))
) : (
<View style={styles.container}>
<Text>{"\n\n" + (this.state.displayArray === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "\n\n\n"}</Text>
<Button
color="#F78400"
title= 'Back'
onPress={() => this.props.navigation.goBack()}>BACK
</Button>
</View>
)}
</ScrollView>
);
}
}

You are passing product.quantity to left
But the documentation says
left Type: (props: { color: string; style: { marginLeft: number;
marginRight: number; marginVertical?: number; }; }) => React.ReactNode
Callback which returns a React element to display on the left side.
https://callstack.github.io/react-native-paper/list-item.html#left
If you want to show the quantity in the left you should do
left={()=>(<Text>product.quantity<Text>)}

How do you map an array of objects within an object?

I am trying to map an array of objects within an object and I can't seem to get it working. My code's goal is to map and then display the content within the "menu" array.
Here is the structure of the object (logged to console from a state).
Object {
"id": 1,
"img": "https://cuisinederue.org/wp-content/uploads/2019/08/Greg2.png",
"menu": Array [
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Greg's Burger",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Poutine double cheese bacon",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Cône de poulet pop corn et frites maison",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Grilled cheese Philly steak",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Poutine Philly cheese steak",
"price": 1,
},
Object {
"description": "Les prix sont défini à la tête du client",
"name": "Boulette de mac'n'cheese",
"price": 1,
},
],
"name": "Greg's dinner",
"type": "SOUTHERN COMFORT",
}
And here is the code that I'm trying to get to work: (specifically the details.menu.map part)
const Details = ({navigation, idTruck}) =>{
const [details, setDetails] = useState([]);
const [detailsDone, setDetailsDone] = useState(false);
const getDetails = () => {
fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1").then(res => res.json()).then(resp => setDetails(resp));
}
if(!detailsDone)
{
getDetails();
setDetailsDone(true);
}
console.log(details);
return (
<View style={styles.container}>
<Header title='Details'></Header>
<Image name="logo" style={styles.detailsImage} source={{uri: details.img}}></Image>
<Text name="nom">{details.name}</Text>
<Text name="style">{details.type}</Text>
{
details.menu.map(({description, name, price}) =>
<View style={styles.container}>
<Text name="nom">{name}</Text>
<Text name="prix">{price}</Text>
<Text name="desc">{description}</Text>
</View>
)
}
</View>
)
}
The error I am getting is: TypeError: undefined is not an object (evaluating 'details.menu.map'
Any help is greatly appreciated!

You have big problem in controlling JS asynchronous. Please try to understand it first before you start to study reactJS. Some async functions: setTimeout, setInterval, Ajax (call api), here is small tut . From this point, you don't need to use detailsDone state.
High performance when use useEffect for calling api only 1 time.
const initValue = {
id: 0,
name: "",
type: "",
img: "",
menu: []
}
const [details, setDetails] = useState(initValue); // init value is object, not array
React.useEffect(() => {
fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1")
.then(res => res.json())
.then(resp => setDetails(resp));
}, []); // ensure call api run 1 time when this component render.

it looks like you're trying to map over details.menu, but when the component loads initially, details is an empty array, which does not have property menu.
One workaround would be to conditionally render something else (like a loading indicator) until the data is set into component state.

Automatizing the questions and answers asked in Dialogflow from a json file that contains them

I have a DialogFlow chatbot where I create question and answer cards. I write them by hand. However, I have this list as a question in a json file. How can I access the questions and answers in my file instead of writing them by hand? Is there a way to bulk download or access the questions and answer used by the Dialogflow agent?
Here is the online editor code for my chatbot
'use strict';
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion, Payload} = require('dialogflow-fulfillment');
var answers = [];
var score = {};
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
function answerIntroductionHandler(agent){
agent.add(new Card({
title: '1 Faut-il accélérer l’automatisation du métro ?', # pregunta 1
imageUrl: 'http://www.leparisien.fr/resizer/mz-PnB5RECZ1q-z9GDRvlB_3jsg=/932x582/arc-anglerfish-eu-central-1-prod-leparisien.s3.amazonaws.com/public/RJPSM346RO4M5VIDDOS35APBII.jpg'
})
);
agent.add(new Suggestion("Oui"));
agent.add(new Suggestion("Non"));
}
function answer1Handler(agent){
const answer = agent.parameters.Boolean;
if(answer === 'true'){
score.griveaux = (score.griveaux+1) || 1 ;
}else{
}
answers.push(answer);
agent.add(new Card({
title: '2 Faut-il faire payer le stationnement des deux-roues ?', # pregunta 2
imageUrl: 'https://img.autoplus.fr/news/2017/06/28/1517769/c4d017960fb061c5e50cf2c4-1350-900.jpg?r'
})
);
agent.add(new Suggestion("Oui"));
agent.add(new Suggestion("Non"));
}
function answer2Handler(agent){
const answer = agent.parameters.Boolean;
answers.push(answer);
if(answer === 'true'){
score.villani = (score.villani+1) || 1;
}else{
}
console.log(score);
var max = Object.keys(score).reduce(function(a, b){ return score[a] > score[b] ? a : b ;});
agent.add('Vous semblez etre assez proche de ' + max);
}
function answer3Handler(agent){
console.log(agent.parameters);
const answer = agent.parameters.Boolean;
answers.push(answer);
if(answer === 'true'){
score.villani = (score.villani+1) || 1;
}else{
}
console.log(score);
var max = Object.keys(score).reduce(function(a, b){ return score[a] > score[b] ? a : b ;});
agent.add('Vous semblez etre assez proche de ' + max);
}
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('answerIntroduction', answerIntroductionHandler);
intentMap.set('answer1', answer1Handler);
intentMap.set('answer2', answer2Handler);
agent.handleRequest(intentMap);
});
Here's my json file of questions and answers:
{
"Transports": {
"Faut-il accélérer l’automatisation du métro ?": [
"Oui",
"Non"
],
"Faut-il faire payer le stationnement des deux-roues ?": [
"Oui",
"Non"
],
"Faut-il interdire les bus de tourisme dans la capitale ?": [
"Oui",
"Non"
],
"Faut-il piétonniser les quatre arrondissements centraux de la capitale ?": [
"Oui",
"Non"
],
"Faut-il réduire le nombre de places de stationnement en surface ?": [
"Oui",
"Non"
],
"Faut-il rendre le Vélib' gratuit ?": [
"Oui",
"Non"
],
"Faut-il renforcer la vidéoverbalisation ?": [
"Oui",
"Non"
],
"Faut-il rouvrir à la circulation les voies sur berges ?": [
"Oui",
"Non"
],
"Faut-il interdire les trottinettes électriques ? (free floating)": [
"Oui",
"Non"
],
"Le périphérique doit-il...": [
"... être supprimé",
"... comprendre une voie pour bus et covoiturage",
"... être préservé"
],
"Les transports doivent-ils être rendus gratuits...": [
"... uniquement pour les seniors",
"... pour les mineurs et les seniors",
"... pour tout le monde",
"Non, ils doivent rester payants"
]
},
"Sports et Loisirs": {
"Faut-il demander l'annulation des Jeux olympiques ?": [
"Oui",
"Non"
],
"Faut-il mettre fin à la pratique du tirage au sort pour le conservatoire ?": [
"Oui",
"Non"
]
}
}

If you put them in CSV format, you can use Knowledge Connectors for this.

I want to Embed an API call in my Website using Jquery

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

Append extra attribute to JSON Object

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.