How to show id specific JSON data on a description page

How-to Discussions
1

Hello everyone,

I have a list of places where I am showing all of the items in the places database. When you click on a specific place listing I want it to show just the details of that specific place listing. After trying what I know from using JSON in web design I can’t figure it out. The code is below. And advice is highly appreciated.

            <Page ux:Name="places">

                <Text FontSize="36" Width="70%" Font="Medium">Places</Text>

                <ScrollView Margin="10,140,10,0">

                    <StackPanel Alignment="Top">

                        <Panel Height="100" Width="100"/>

                        <Each Items="{data.places}">
                            <Panel Margin="0,28,0,40" Height="200" Alignment="VerticalCenter">

                                <DropShadow Size="6" Distance="3" Color="#000"/>

                                <Panel>
                                    <Text LineSpacing="12" TextWrapping="Wrap" Margin="0,5,0,0">
                                        <Text Value="{title}" />
                                        <Text Value="{address}" Margin="0,20,0,0" FontSize="12" />
                                        <Text Value="{deal}" Margin="0,35,0,0" FontSize="14"/>
                                    </Text>

                                </Panel>


                                <Clicked>
                                    <Set place_panel.Visibility="Visible"/>
                                    <BringToFront Target="place_panel" />
                                </Clicked>
                                 <Image Url="{image}" StretchMode="Fill"/>
                             </Panel>


                            </Each>
                    </StackPanel>
                </ScrollView>

                <Panel ux:Name="place_panel" Width="100%" Height="100%" Visibility="Hidden" Background="#E8E8E8" Margin="0,160,0,0">

                    <Text TextColor="#000">
                        Close Panel
                        <Clicked>
                            <Set place_panel.Visibility="Hidden"/>
                        </Clicked>
                    </Text>

                    <Each Items="{data.places}">
                        <Text Value="{title}" />
                        <Text Value="{address}" Margin="0,20,0,0" FontSize="12" />
                        <Text Value="{deal}" Margin="0,35,0,0" FontSize="14"/>
                    </Each>

                <DropShadow Angle="270" Distance="12" Size="10" Spread="0.3"  />        
                </Panel>



            </Page>
2

Also, here’s an example of a portion of the JSON data:

{
“places”:[
{
“id”:“10”, “title”:“The Yard Market Square”, “address”:“100 5th Avenue, Pittsburgh, PA”, “phone”:"(412) 291-8182", “image”:“http:\/\/midnightguru.com\/place_stock\/75834677317.jpg”, “deal”:“Offers Sliders & Flights” }, {
“id”:“9”, “title”:“Ten Penny”, “address”:“960 Penn Avenue, Pittsburgh, PA”, “phone”:"(412) 318-8000", “image”:“http:\/\/midnightguru.com\/place_stock\/71788831059.jpg”, “deal”:“Offers Happy Hour Deal” }, {
“id”:“13”, “title”:“Nola on the Square”, “address”:“24 Market Square, Pittsburgh, PA”, “phone”:"(412) 471-9100", “image”:“http:\/\/midnightguru.com\/place_stock\/64202572125.png”, “deal”:“Offers Happy Hour Deal” }, {
“id”:“23”, “title”:“Revel + Roost”, “address”:“242 Forbes Ave”, “phone”:"(412) 281-1134", “image”:“http:\/\/midnightguru.com\/place_stock\/64533728337.png”, “deal”:“Happy Hour Features” } ], “events”:[
{
“id”:“311”, “title”:“WineFestacular”, “start_date”:“Saturday, March 19”, “venue”:“David L. Lawrence Convention Center”, “image”:“https:\/\/scontent.xx.fbcdn.net\/hphotos-xtl1\/v\/t1.0-9\/12717725_1657608291166927_2928758426643461859_n.jpg?oh=b379b43c1726ae5963221e20013b7c6b&oe=578971A8” }, {
“id”:“265”, “title”:“Blake Shelton”, “start_date”:“Saturday, March 19”, “venue”:“CONSOL Energy Center”, “image”:“https:\/\/scontent.xx.fbcdn.net\/hphotos-xtp1\/v\/t1.0-9\/s720x720\/12193839_10153236783343583_5216634181069889026_n.jpg?oh=f1023b8775cefda80ec60a42df7d865d&oe=57256EE2” }, {
“id”:“318”, “title”:“Vance Joy at Stage AE!”, “start_date”:“Wednesday, March 23”, “venue”:“Stage AE”, “image”:“https:\/\/scontent.xx.fbcdn.net\/hphotos-xat1\/v\/t1.0-9\/p720x720\/11217964_940045806032359_5476484279422146988_n.jpg?oh=44a5f30ded0af1fb3e7c61bfea8bed4a&oe=57559125” }, {
“id”:“321”, “title”:“Galactic w\/ Bright Light Social Hour - 3\/23 in Pittsburgh”, “start_date”:“Wednesday, March 23”, “venue”:“The Rex Theater”, “image”:“https:\/\/scontent.xx.fbcdn.net\/hphotos-xta1\/v\/t1.0-9\/s720x720\/12038289_430871833787162_7330154283408315124_n.jpg?oh=4510d296a7065bc2b5f56a18f6f850f5&oe=574C49D1” }, {
“id”:“301”, “title”:“Slander ll Diesel Club Lounge ll 3.24.16”, “start_date”:“Thursday, March 24”, “venue”:“Diesel Club Lounge - Pittsburgh”, “image”:“https:\/\/scontent.xx.fbcdn.net\/hphotos-xft1\/t31.0-8\/s720x720\/12841450_1030456270344036_2042877478398012192_o.jpg” },

3

So what you need is a seperate Observable which would represent the selected place

var selectedPlace = Observable();

function selectPlace (evt) {
 selectedPlace.value = evt.data;
}

module.exports = {
  data: ..., // whatever you have data as
  selectedPlace: selectedPlace,
  selectPlace: selectPlace
}

Your UX:

<Panel ux:Name="place_panel" Width="100%" Height="100%" Visibility="Hidden" Background="#E8E8E8" Margin="0,160,0,0">
    <Text TextColor="#000" Value="Close Panel">
        <Clicked>
            <Set place_panel.Visibility="Hidden" />
        </Clicked>
    </Text>
    <Select Data="{selectedPlace}">
        <Text Value="{title}" />
        <Text Value="{address}" Margin="0,20,0,0" FontSize="12" />
        <Text Value="{deal}" Margin="0,35,0,0" FontSize="14" />
    </Select>
    <DropShadow Angle="270" Distance="12" Size="10" Spread="0.3" />
</Panel>

In the places Panel:

<Each Items="{data.places}">
    <Panel Margin="0,28,0,40" Height="200" Alignment="VerticalCenter">
        <DropShadow Size="6" Distance="3" Color="#000" />
        <Panel>
            <Text LineSpacing="12" TextWrapping="Wrap" Margin="0,5,0,0">
                <Text Value="{title}" />
                <Text Value="{address}" Margin="0,20,0,0" FontSize="12" />
                <Text Value="{deal}" Margin="0,35,0,0" FontSize="14" />
            </Text>
        </Panel>
        <Clicked>
            <Set place_panel.Visibility="Visible" />
            <BringToFront Target="place_panel" />
            <Callback Handler="{selectPlace}" />
        </Clicked>
        <Image Url="{image}" StretchMode="Fill" />
    </Panel>
</Each>
4

You are a lifesaver! Thank you it worked. I had updated it previously with the Select tag so I was close but you got me through the last parts.