We Keep Coding

Nativescript-vue TabView unable to render first item coming from API

Situation:
Im working on nativescript-vue app where im using TabView Items to create tabs. The title for tab and the information inside the tab is being for looped from JSON data file.
Problem:
The first tabviewitem doesnt render any information. Inorder to see the data, i have to click on other tabs first go back to first tab. After that, i can see the items
The markup i have to create tab using nativescript-vue:
<TabView
android:tabBackgroundColor="#ffffff"
android:tabTextColor="#ffa801"
android:selectedTabTextColor="#f53b57"
androidSelectedTabHighlightColor="#ffffff"
androidTabsPosition="Bottom">
<TabViewItem v-for="subcategory in subcategories" :title="subcategory.name" >
<FlexboxLayout>
<Label :text="subcategory.name" />
</FlexboxLayout>
</TabViewItem>
</TabView>
Subcategories is JSON array coming from API with following structure.
[
{
"id": 3,
"category_id": 1,
"name": "Vegetarian",
"ar_name": null,
"description": "Vegetarian",
"ar_description": null,
"image": null,
"created_at": "2020-03-04 04:12:13",
"updated_at": "2020-03-04 04:12:13",
"items": [
{
"id": 6,
"subcategory_id": 3,
"name": "Salad",
"ar_name": null,
"description": "test",
"ar_description": null,
"price": "100",
"status": "1",
"ar_price": null,
"discount": null,
"discount_colour": null,
"created_at": "2020-05-07 05:32:17",
"updated_at": "2020-05-07 05:32:17"
}
]
},
{
"id": 2,
"category_id": 1,
"name": "Sea Food",
"ar_name": null,
"description": "sea food",
"ar_description": null,
"image": null,
"created_at": "2020-03-04 04:11:38",
"updated_at": "2020-03-04 04:11:38",
"items": [
{
"id": 4,
"subcategory_id": 2,
"name": "some item",
"ar_name": null,
"description": "desc",
"ar_description": null,
"price": "100",
"status": "1",
"ar_price": null,
"discount": null,
"discount_colour": null,
"created_at": "2020-05-06 12:02:58",
"updated_at": "2020-05-06 12:02:58"
}
]
}
]
Solutions that i have tried
https://github.com/nativescript-vue/nativescript-vue/issues/515
but no luck
[Update] here is my script:
<script >
import axios from 'axios';
import Login from "./Login";
import FoodItems from "./FoodItems"
import SubCategories from "./parts/SubCategories"
import CategoryButtons from "./parts/CategoryButtons"
import Popular from "./parts/Popular"
// import Items from "./Items"
export default {
components: {SubCategories, CategoryButtons, Popular},
props: ['parentCategory'],
data() {
return {
subcategories: [],
populars: [],
categories:this.$store.getters.getCategories,
}
},
mounted(){
axios({
method:"GET",
"url":this.$store.state.apiUrl+"categories/"+this.parentCategory.id+"/subcategories",
headers:{
'Accept': 'application/json',
'Authorization': 'Bearer ' + this.$store.getters.getToken,
}
}).then(
response =>
{
//
this.subcategories =response.data.fooditems;
this.populars = response.data.popularitems;
// console.log(response.data.popularitems);
}, error => {
console.error(error);
}
);
},
methods: {
checkToken() {
this.$store.commit("loadFromStorage");
if(!this.$store.getters.getToken) { this.$navigateTo(Login, { clearHistory: true }) }
},
goToShowCase(args) {
// console.log(args);
this.$navigateTo(Showcase,
{
props:
{ parentCategory: args }
});
}
}
}
</script>
Update 2:
I created a similar issue on nativescript playground.
https://play.nativescript.org/?template=play-vue&id=7mNLr7
Thank you in advance!

Does adding a :key to your iterated items solve the issue?
<TabViewItem v-for="subcategory in subcategories"
:key="some_unique_value_between_them"
:title="subcategory.name"
loaded="mainContentLoaded">

Find and replace key in Javascript object

I'm accessing a JSON that comes back looking like this:
[
{
"itemType": "SelectionTitle",
"name": "1105F.MID",
"active": true,
"isFactoryDefault": false,
"factoryCode": "",
"seasons": [],
"denominations": [],
"groups": [],
"length": 0,
"_id": "5ada2217c114ca048e1db9b0",
"created_by": "5ab57289d8d00507b29a3fdd",
"selectionFile": {
"itemType": "SelectionFile",
"name": "1105F.MID",
"active": true,
"isFactoryDefault": false,
"selectionType": "Music",
"sfzFile": "",
"destination": "/data/uploads",
"encoding": "7bit",
"fieldname": "file",
"filename": "782f49a7cd72b865b4e2d286816792e7",
...
"found": true,
"flError": false,
"error_strings": [],
"_id": "5ada2217c114ca048e1db9af",
"created_by": "5ab57289d8d00507b29a3fdd",
"slug": "1105fmid",
"__v": 0,
"createdAt": "2018-04-20T17:23:35.216Z",
"updatedAt": "2018-04-20T17:23:35.788Z",
"selectionTitles": null,
"id": "5ada2217c114ca048e1db9af"
},
"slug": "1105fmid",
"createdAt": "2018-04-20T17:23:35.285Z",
"updatedAt": "2018-04-20T17:23:35.285Z",
"__v": 0,
"id": "5ada2217c114ca048e1db9b0"
}, ...
The react-select node module that I am using takes the key "label" to generate a populated dropdown.
The JSON is coming from the web so I can't control how the JSON is setup. How do I parse the JSON to find all the instances of "name" and replace that key with "label" ?
For example "name" : 1105F.MID" should be changed to "label" : "1105.MID"
Would it be inefficient to convert the entire thing to a string and use the javascript method find/replace?

Assuming your JSON array is stored in the variable data:
data.forEach(item => item.label = item.name)
This would be sufficient to duplicate the name property as the label property for each item in the array.

I have created a function replace() to deal with every object and nested objects, which will add property 'label' if 'name' property is found. Pls see if it's useful to you.
var arr = [
{
"itemType": "SelectionTitle",
"name": "1105F.MID",
"active": true,
"isFactoryDefault": false,
"factoryCode": "",
"seasons": [],
"denominations": [],
"groups": [],
"length": 0,
"_id": "5ada2217c114ca048e1db9b0",
"created_by": "5ab57289d8d00507b29a3fdd",
"selectionFile": {
"itemType": "SelectionFile",
"name": "1105F.MID"
}
},
{
"itemType": "SelectionTitle",
"name": "test",
"active": true,
"isFactoryDefault": false,
"factoryCode": "",
"seasons": [],
"denominations": [],
"groups": [],
"length": 0,
"_id": "5ada2217c114ca048e1db9b0",
"created_by": "5ab57289d8d00507b29a3fdd",
"selectionFile": {
"itemType": "SelectionFile",
"name": "testing"
}
}
]
// this method will take care of adding new property
function replace(obj, from, to) {
Object.entries(obj).forEach(([key, value]) => (
key == from && (obj[to] = obj[from])
, typeof value === "object" && replace(value, from, to)
))
}
arr.forEach(d => replace(d, 'name', 'label'))
// you can check this log for property 'label' whereever 'name' exists
console.log(arr)

Relying on the structure of server response is bad; especially when you say you have not control over it. A better way would be to always parse the server response, construct whatever necessary for the react-select component to work and pass that only.

Passing a parameter between multiple intents triggering Dialogflow's Fulfillment

I have a Dialogflow agent that I've setup with a web hook that is pulling info from a Firebase database. I am trying to have different intents kick off different queries on the DB. From the Welcome Intent the agent asks for a name that it will matching the DB (e.g. Hi it's nice to meet you? What is the name you looking for?). From there the user is gives a name which is a response that triggers another intent called "name." This intent has a parameter called "agent.parameters.defaultName" which is passed into the fulfillment and used to query the DB. Below is the webhook kicks off the following script:
});
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request,
response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' +
JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
//function to request bio info on the db
function handleData(agent) {
const congressName = agent.parameters.congressName;
return admin.database().ref().once("value").then((snapshot) => {
var nameInfo = snapshot.child('Name/' + congressName + '/profile').val();
agent.add(nameInfo + "\n \n Tell me the first and last name of the next
person you'd like to learn about. Or you can say Twitter to get this
individual's Twitter info.");
});
}
//Function to return the name's tweet info
function handleTweet(agent) {
const congressName = agent.parameters.congressName;
return admin.database().ref().once("value").then((snapshot) => {
var nameTweet = snapshot.child('Name/' + congressName + '/twitter_handle').val();
agent.add(nameTweet);
});
}
// Run the proper function handler based on the matched Dialogflow intent
name
let intentMap = new Map();
intentMap.set('name', handleData);
intentMap.set('name - custom', handleTweet);
agent.handleRequest(intentMap);
});
This returns the bio and prompts the user to say another name or say twitter to pull the twitter info.
If the user says Twitter I'd like for another intent to be triggered. This Intent would also have a fulfillment that would call the DB, but this time it'd pull the Twitter info. Where I'm having an issue is I can't get this intent to trigger the fulfillment. I'm wondering if my parameter is in the right section or if I need to figure out how to pass it to the Twitter intent. I'm not sure where I'm off.
Below are the intents:
//Name intent
{
"id": "0c7bd173-e7fe-4bb4-9b87-7b94624ceb4e",
"name": "name",
"auto": true,
"contexts": [],
"responses": [{
"resetContexts": false,
"action": "congressName",
"affectedContexts": [{
"name": "Name",
"parameters": {},
"lifespan": 5
}],
"parameters": [{
"id": "a79559d6-d3db-4b37-b681-174fce8bc58c",
"required": true,
"dataType": "#sys.any",
"name": "congressName",
"value": "$congressName",
"prompts": [{
"lang": "en",
"value": "What is the proper first and last name of the person you
are looking for info on?"
}],
"isList": false
}],
"messages": [{
"type": 0,
"lang": "en",
"speech": []
}],
"defaultResponsePlatforms": {},
"speech": []
}],
"priority": 500000,
"webhookUsed": true,
"webhookForSlotFilling": false,
"lastUpdate": 1535995990,
"fallbackIntent": false,
"events": []
}
[{
"id": "a14768b0-c64d-4a63-9ccb-d9452b74ed21",
"data": [{
"text": "tammy duckworth",
"alias": "congressName",
"meta": "#sys.any",
"userDefined": false
}],
"isTemplate": false,
"count": 0,
"updated": 1535223341
},
{
"id": "520acfc8-102b-4e14-9342-54678e9f6940",
"data": [{
"text": "tom cotton",
"alias": "congressName",
"meta": "#sys.any",
"userDefined": false
}],
"isTemplate": false,
"count": 0,
"updated": 1535223341
}
]
//Twitter intent
"id": "78330811-d692-4c70-adb2-3130b608d46f",
"name": "twitter",
"auto": true,
"contexts": [],
"responses": [{
"resetContexts": false,
"action": "",
"affectedContexts": [],
"parameters": [{
"id": "7acd4cb2-9cd7-4c2a-b5aa-2981ee25acf4",
"dataType": "#congressName",
"name": "congressName",
"value": "$congressName",
"isList": false
}],
"messages": [{
"type": 0,
"lang": "en",
"speech": []
}],
"defaultResponsePlatforms": {},
"speech": []
}],
"priority": 500000,
"webhookUsed": true,
"webhookForSlotFilling": false,
"lastUpdate": 1535996186,
"fallbackIntent": false,
"events": []
}
[{
"id": "4f099a33-74c6-4832-acd1-815aca6605f2",
"data": [{
"text": "Susan Collins",
"alias": "congressName",
"meta": "#congressName",
"userDefined": false
},
{
"text": " Twitter",
"userDefined": false
}
],
"isTemplate": false,
"count": 0,
"updated": 1535996186
},
{
"id": "f775749a-56fd-410d-a167-174e6eb03ddf",
"data": [{
"text": "twitter ",
"userDefined": false
},
{
"text": "#congress",
"alias": "congressName",
"meta": "#congressName",
"userDefined": true
}
],
"isTemplate": false,
"count": 0,
"updated": 1535238371
}
]

Assign array of JSON objects to array of interface Angular/Typescript

Currently, this works and doesn't give my error while running but my text editor is giving me an error that says property 'categories' does not exist on type 'CategoryInterface[]' (on the line where response.categories is assigned to variable) so I'm not sure if I'm doing things right.
public categories: CategoryInterface[];
.subscribe((response: CategoryInterface[]) => {
this.categories = response.categories;
console.log(this.categories);
});
My backend returns this:
{
"categories": [
{
"categoryId": 1,
"name": "Important",
"description": "This category is important.",
"order": 1,
"createdBy": null,
"createdAt": "2017-11-25 12:09:04",
"updatedBy": null,
"updatedAt": "2018-01-17 23:53:25",
"categoryBoards": [
{
"categoryBoardId": 1,
"categoryId": 1,
"name": "Announcements",
"description": null,
"order": 2,
"createdBy": null,
"createdAt": "2017-11-25 12:09:49",
"updatedBy": null,
"updatedAt": "2018-01-18 00:09:02"
},
{
"categoryBoardId": 23,
"categoryId": 1,
"name": "Rules",
"description": null,
"order": 1,
"createdBy": null,
"createdAt": "2018-01-18 00:08:57",
"updatedBy": null,
"updatedAt": "2018-01-19 00:05:51"
}
]
}
]
}

You are trying to cast your api response to an array of CategoryInterface which is not the case, you better use your subscribe method like this:
.subscribe((response: any) => {
this.categories = <CategoryInterface[]> response.categories;
console.log(this.categories);
});
It's the your api response categories which needs to be casted to CategoryInterface[]
Bonus: The angular style-guide notice that you need to declare classes instead of interfaces and you don't have to suffix the class name with Interface, so just name your CategoryInterface to Category.

You get the error because you declare response as a CategoryInterface[], but response.categories is actually the CategoryInterface[]. response is just a wrapper around the array. All the types are stripped out when the typescript is converted to javascript, which is why it works fine at runtime.

Cant read React state data

I'm developing a react application and in my state I have the data saved that I try to read. When I JSON.stringify the device data "console.log"'it out, look like this:
{
"ActTime": 1509988664,
"ServerTime": "2017-11-06 18:17:44",
"Sunrise": "07:25",
"Sunset": "15:53",
"result": [
{
"AddjMulti": 1,
"AddjMulti2": 1,
"AddjValue": 0,
"AddjValue2": 0,
"BatteryLevel": 255,
"CustomImage": 0,
"Data": "On",
"Description": "",
"Favorite": 1,
"HardwareID": 2,
"HardwareName": "Controller",
"HardwareType": "OpenZWave USB",
"HardwareTypeVal": 21,
"HaveDimmer": true,
"HaveGroupCmd": true,
"HaveTimeout": false,
"ID": "00000501",
"Image": "Light",
"IsSubDevice": false,
"LastUpdate": "2017-11-06 15:42:00",
"Level": 0,
"LevelInt": 0,
"MaxDimLevel": 100,
"Name": "Vardagsrum",
"Notifications": "false",
"PlanID": "0",
"PlanIDs": [
0
],
"Protected": false,
"ShowNotifications": true,
"SignalLevel": "-",
"Status": "On",
"StrParam1": "",
"StrParam2": "",
"SubType": "Switch",
"SwitchType": "On/Off",
"SwitchTypeVal": 0,
"Timers": "false",
"Type": "Light/Switch",
"TypeImg": "lightbulb",
"Unit": 1,
"Used": 1,
"UsedByCamera": false,
"XOffset": "0",
"YOffset": "0",
"idx": "3"
}
],
"status": "OK",
"title": "Devices"
}
If I want to read the status data I just do: device['status'] I get "OK", but what if I want to access the result data in the device?
I thought that device['result'][0]['Status'] would give my 'Ok, but I just get Uncaught TypeError: Cannot read property '0' of undefined ???
How do I read the result data in the device??

To do this device['result'][0]['Status'] you want to ensure your device data is not a string but a proper JSON object. You could JSON.parse() to convert it if it's not already an object.
Also ensure the data is available before trying that.

Try to use map method over result array.
Something like this:
result.map((item,index)=>{
console.log(item[index].AddjMulti);
})