Databases
StackOverflow2013
Postsdbo
POJSON - Display data according to the index of json
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJSON - Display data according to the index of json
    primarykey
    data
    text
    <p>I'm trying to display particular json data in a form of <strong>Bullets</strong>. Each <strong><em>chapter</em></strong> data into <code>&lt;li&gt;</code>, each <strong><em>title</em></strong> into <code>&lt;p&gt;</code> and make those titles as a <code>link</code>. Finally, consider to the index of clicked <strong><em>title</em></strong> display related <strong><em>content</em></strong> in a second <code>&lt;div&gt;</code>. I have already some piece of code below (not working yet).</p> <p><strong>Html</strong>:</p> <pre><code>&lt;div id="page1"&gt; &lt;ul id="courses"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;div id="page2"&gt; &lt;p id="content"&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p><strong>JS code</strong>:</p> <pre><code>var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"}, {"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"}, {"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"}, {"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"}, {"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]'; var myData = JSON.parse(jsonString); $(document).ready(function() { var $clist = $('#courses'); for(var i in myData) { $('&lt;li&gt;&lt;h3&gt;' +this.[i].chapter+ '&lt;/h3&gt;&lt;p&gt;&lt;a href="#page2" onclick="dContent(i)"&gt;' +this.title+ '&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;').appendTo($clist); } function dContent() { var $ccontent = $('#content'); $(this.[i].content).appendTo($ccontent); } }); </code></pre> <p>Expected result:</p> <pre><code>- General News forum // onclick display 'Text1' in &lt;p id="content"&gt; - CHAPTER 1 1.1 Introduction // onclick display 'Text2' in &lt;p id="content"&gt; 1.2 Main Idea // onclick display 'Text3' in &lt;p id="content"&gt; - CHAPTER 2 2.1 Architecture // onclick display 'Text4' in &lt;p id="content"&gt; - CHAPTER 3 3.1 Liter.overview // onclick display 'Text5' in &lt;p id="content"&gt; </code></pre> <p>Any help would be appreciated.</p> <p><strong>UPDATE</strong>: Here is the <a href="http://jsfiddle.net/rutZA/" rel="nofollow">JSFIDDLE</a> project.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDozent
    1. USDozent
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJSON - Display data according to the index of json
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJSON - Display data according to the index of json
      1. USdefau1t
      1. VTFavorite
    3. VO
      singulars
      1. POJSON - Display data according to the index of json
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou will need to capture `i` in it's own scope in the loop, use a generator function or store the data somewhere else (e.g. _data-*_ attribute) to create your desired onclick listeners.
      singulars
      1. POJSON - Display data according to the index of json
      1. USPaul S.
    2. COWhat exactly is not working?
      singulars
      1. POJSON - Display data according to the index of json
      1. USFelix Kling
    3. CO@FelixKling nothing is printing for the result. Please have a look to the **jsfiddle** (link is above) version.
      singulars
      1. POJSON - Display data according to the index of json
      1. USDozent
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload