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.

`

                <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

Get which one is clicked on in JavaScript, and then use this to set which one is showed in the special panel.

 <App Theme="Basic">
     <JavaScript>
         var Observable = require('FuseJS/Observable');
         var places = Observable();
         places.add({title: 't1', address: 'a1', deal: 'd1'});
         places.add({title: 't2', address: 'a2', deal: 'd2'});

         var place = Observable();

         function set_place (d) {
             console.log(JSON.stringify(d));
             place.value = d.data;
         }

         module.exports = {
             places: places,
             place: place,
             set_place: set_place
         }
     </JavaScript>
     <Panel>
         <StackPanel>
             <Each Items="{places}">
                 <StackPanel Orientation="Horizontal">
                     <Text Value="{title}" />
                     <Text Value="{address}" />
                     <Clicked>
                         <Callback Handler="{set_place}" />
                         <Set place_panel.Visibility="Visible"/>
                         <BringToFront Target="place_panel" />
                     </Clicked>
                 </StackPanel>
             </Each>
         </StackPanel>
         <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>

             <Text Value="{place.title}" />
             <Text Value="{place.address}" Margin="0,20,0,0" FontSize="12" />
             <Text Value="{place.deal}" Margin="0,35,0,0" FontSize="14"/>
         </Panel>
     </Panel>
 </App>
3

This is a duplicate which has been resolved: https://www.fusetools.com/community/forums/howto_discussions/how_to_show_id_specific_json_data_on_a_description_1

Not sure if Fuse Team wants to delete this duplicate