I need to see some code snippets for all three components.
I want to make this simple single page app.
It consists of three components: App, Nav and Container.
The data comes from an api in this form:
[{
"category": "dogs",
"available": [
{
"name": "pedro",
"breed": "chihuahua"
},
{
"name": "roxane"
"breed": "beagle"
}
]
},
{
"category": "cat",
"available": [
{
"name": "garfield",
"breed": "tobby"
}
]
}]
The Nav displays all the categories.
The Container displays the currently selected category, and ALL the name-breed pairs for that category.
example: Click on Dogs
Dogs
Pedro
Chihuahua
Roxane
Beagle
My concerns
At the moment I am having trouble with the nav bar routing and displaying ALL the name-breed pairs for a selected category.
I know that there are two ways to do this:
1- using a express for the routing and a react controller for the fetch
2- isomorphic react fetch, react router, redux to store state
Related
I can't find anything in the documentation of SurveyJS. If there is something I missed, a link would be great!
We have implemented a Custom Widget as described here and it works well. What we want to do next is to change the Display Value on the 'Survey Results' section when testing the survey from the creator. In other words, a 'Signature' question's result is displayed as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAUGklEQVR4nO3dz28j53kH8PwZFYM6btOGAnIwWpRCe2iLAFSK2IgLUD20PTRa9GL4IiUHF2hBnZxDUuoSyT8623rLxAmpbFdCxaVn15n1luQOC3K7IW1yzRKt6HpEgQfyMOSBGPDy9CC9s8MhJc4MZzjvkN8PwIN3sdrZxerr933meZ/3KwQAEBBf8fsBAACsQmABQGAgsAAgMBBYABAYCCwACAwEFgAEBgILAAIDgQUAgYHAAoDAQGABQGAgsABM1JFGtX6Xav0upZUGHZ1ffm63qhOfYu+Cir0LqvW7fj/2SkBgwcpSRxqJnTPab5bp1tMsbebSFMocUihzSGFRoIiUpJh8rH+2y9mx/47mUhSRkhQWBf3XrYsCbRVPaLci0e1WlWr9LinDgd9...
but we don't want to do this, we want to render the result... but not for the signature but for our custom widget.
Also, is there a function to review your answers before submitting? If there is, we'll most probably also need to display a rendered answer of our custom widget here.
Showing a preview of answers before submitting
There is a SurveyJS feature, which does that. To enable it you need to add a survey-level parameter called showPreviewBeforeComplete. You can choose from the following values:
showAllQuestions
showAnsweredQuestions
This feature will automatically render all images or signatures on the preview page.
The feature is also available through the Survey Creator's UI under the "Navigation" section of the survey settings panel.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
}
],
"showPreviewBeforeComplete": "showAnsweredQuestions"
}
Rendering uploaded images
If you would like to create your own widget, which renders uploaded images or signatures, you can base it on the HTML widget. It should contain an <img src='{question1}' /> tag, where the value of the src parameter should be the base64 data string, which you retrieved from the signature pad widget.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
},
{
"name": "page2",
"elements": [
{
"type": "html",
"name": "question2",
"html": "<img src='{question1}' />"
}
]
}
]
}
I have object returned from API in the following format:
{
"count": 0,
"result": [
{
"id": "5dfbb8d5b2f68faf05688997",
"createdOn": "1577121878136",
"hash": "d7a3a552a2c1a765b3bcd935980a1982",
"modifiedOn": "1577121878136",
"company": {},
"home": {},
"first_name": "string",
"last_name": "string",
"isActive": true,
"funding": "string",
"medication": "string",
"startDate": "string"
}
]
}
I am using vuex to store data. How do I use vuetify's v-data-table to make pagination. The backend is paginated. And my api is axios.get(..../?page='+page + '&count='+count)' I need to pass page and count as argument to get paginated data.
I would be grateful if you could link me some of the resources to do it. I tried but I was not able to achieve it and did not find any materials for it. I followed vuetify's docs for external pagination but there it assumes the data are only externally paginated, they donot link to veux store.
call v-data-table with these parameters.
<v-data-table
:headers="yourHeadersArrayOfObject"
:items="yourItemsArrayOfObject"
:page="yourCurrentPageNumber"
:items-per-page="yourItemsPerPage"
#update:page="pageUpdateFunction"
></v-data-table>
on methods handle page update =>
pageUpdateFunction(newPageNumber) {
console.log(newPageNumber);
// handle other axios request here and update varibles
},
I'm new to programming Alexa skills, especially with the Echo Show. I am trying to change the background image of the skill card from the default dark grey to something else. I know there has to be a way to do this because when I say, "Alexa, tell me a joke." that skill's background is red. And when I say, "Alexa, tell me about LeBron James." Alexa changes the background to LeBron James and the text auto scrolls. Any help on this would be great.
You can indeed change the background of an Alexa Show skill. Unfortunately, at this time Amazon does not offer a bunch of styling functionality beyond that for the Show skills.
The display interface reference is the documentation that you should read. It will give you an understanding of how all your calls and responses will be sent/received as JSON objects. In order to change the background you must choose one of the few template options they have available and add the background key and value to your JSON response structure.
For example, check out the following response structure you should send back from your AWS lambda function. It renders BodyTemplate2 which displays an image on the side of the screen with text on the other side. (This was taken from the display interface reference). Look at the key, "backgroundImage" and the following value.
{
"type": "Display.RenderTemplate",
"template": {
"type": "BodyTemplate2",
"token": "A2079",
"backButton": "VISIBLE",
"backgroundImage": {
"contentDescription": "Textured grey background",
"sources": [
{
"url": "https://www.example.com/background-image1.png"
}
],
"title": "My Favorite Car",
"image": {
"contentDescription": "My favorite car",
"sources": [
{
"url": "https://www.example.com/my-favorite-car.png"
}
]
},
"textContent": {
"primaryText": {
"text": "See my favorite car",
"type": "PlainText"
},
"secondaryText": {
"text": "Custom-painted",
"type": "PlainText"
},
"tertiaryText": {
"text": "By me!",
"type": "PlainText"
}
}
}
}
}
I'm looking for rendering 3D Buildings extrusion in a React-Native app using github /mapbox/react-native-mapbox-gl
I created a custom map in MapBox Studio,added the following line into the style.json and uploaded the map in Mapbox Studio
{
"id": "buildings",
"type": "fill-extrusion",
"source": "composite",
"source-layer": "building",
"minzoom": 15,
"filter": [
"all",
[
"==",
"extrude",
"true"
],
[
">",
"height",
1
]
],
"paint": {
"fill-extrusion-color": "hsl(206, 7%, 61%)",
"fill-extrusion-height": {
"type": "identity",
"property": "height"
},
"fill-extrusion-base": {
"type": "identity",
"property": "min_height"
},
"fill-extrusion-opacity": 1,
"fill-extrusion-translate-anchor": "viewport"
}
}
The buildings are rendered as expected in mapbox-studio but when I go back in my React-Native App the map is shown but without the buildings.
Do you guys have any idea about how to display buildings in 3D with the react-native-mapbox-gl sdk ?
Thanks.
Screenshot of mapbox studio
Screenshot of the React-Native Map
Compatibility fix for this issue:
Add a new layer for your custom map in Mapbox Studio
Source: Mapbox Streets V7 (building)
Type: Fill extrusion
Edit style
Click on Height and then Edit JSON (in the bottom of the panel)
Then, paste the following code:
{
"type": "identity",
"property": "height"
}
Paste and publish your style and use as a MapBox style for your map in React-Native
I am developing a simple movie listing app.
I am using rotten tomatoes api. following is the json :
movies": [{
"id": "771310572",
"title": "Cloud Atlas",
"year": 2012,
"mpaa_rating": "R",
"runtime": 163,
"release_dates": {
"theater": "2012-10-26"
},
"ratings": {
"critics_rating": "Fresh",
"critics_score": 80,
"audience_score": 98
},
"synopsis": "Cloud Atlas explores how the actions and consequences of individual lives impact one another throughout the past, the present and the future. Action, mystery and romance weave dramatically through the story as one soul is shaped from a killer into a hero and a single act of kindness ripples across centuries to inspire a revolution in the distant future. Each member of the ensemble appears in multiple roles as the stories move through time. -- (C) Warner Bros.",
"posters": {
"thumbnail": "http://content6.flixster.com/movie/11/16/71/11167192_mob.jpg",
"profile": "http://content6.flixster.com/movie/11/16/71/11167192_pro.jpg",
"detailed": "http://content6.flixster.com/movie/11/16/71/11167192_det.jpg",
"original": "http://content6.flixster.com/movie/11/16/71/11167192_ori.jpg"
},
"abridged_cast": [{
"name": "Tom Hanks",
"id": "162655641",
"characters": ["Dermot 'Duster' Hoggins", "Dr. Henry Goose", "Isaac Sachs", "Valleysman Zachry"]
}, {
"name": "Halle Berry",
"id": "162652386",
"characters": ["Jocasta Ayrs", "Luisa Rey", "Meronym"]
}, {
"name": "Jim Broadbent",
"id": "162653369",
"characters": ["Vyvyan Ayrs"]
}, {
"name": "Hugo Weaving",
"id": "162709905",
"characters": ["Bill Smoke", "Nurse Noakes", "Old Georgie"]
}, {
"name": "Jim Sturgess",
"id": "563717190",
"characters": ["Adam Ewing", "Hae-Joo Im"]
}]
I am able to get the first list view showing the list of movies and ontap on movie list item, I am able to load the next view to show the movie details.
I am stuck in displaying abridged_cast in the xtemplate. if I use {abridged_cast} the page displays object, Object.
I am unable to find any functions which will extract the values from this array and display.
How to display the array content in the template?
Thanks.