使用带有 Javascript 的 JSON 数据在 HTML 中创建可点击列表答案

【问题标题】：Create a clickable list in HTML using JSON data with Javascript使用带有 Javascript 的 JSON 数据在 HTML 中创建可点击列表
【发布时间】：2018-09-16 21:26:10
【问题描述】：

我正在使用 Jquery mobile，我想在我的面板中创建一个可点击的视图列表。看起来像这样......

   <li><a href='#' onclick='getmoviepic_mobile(this) ;' > MovieTitle"</a> 
   </li>

MovieTitle 是使用 json_encode($x) 从我的 MYSQL 数据库数组中获取的，因此当用户单击标题时，会触发函数 getmoviepic_mobile(this)。

我的问题是如何使用 json 数据设置我的 javascript 以填充我的 html 页面。

我的 HTML

<div data-role="panel"  id="Panelcategory" > 

      <ul data-role="listview" data-inset="true" id="MovieTitle">
          <li></li>        
      </ul> 


 </div >

PHP getcatagories2_mobile.php

<?php
include("includes/connection.php");

$q=$_POST['input'];

$resultActor = mysqli_query($con,"SELECT id,title, 
 plot,catagory,release_date,rated FROM ".TBL_DATA." WHERE catagory LIKE 
'%".$q."%' ORDER BY title  ");  




    while($rowMovie = mysqli_fetch_array($resultActor)) {



    $x[]=$rowMovie['title'];

    }

        $jsonarray=json_encode($x);
        echo $jsonarray;
?>

Javascript

     function getcatagories(catagory){

        var catagoryValue = $(catagory).text();

       $.getJSON( "getcatagories2_mobile.php", {input:catagoryValue}, 

                function(json) {   this is the part I am stuck on

                               }

不确定即使我的 HTML 设置正确，也可能不需要“li”。

谢谢大家

【问题讨论】：

标签： javascript html json

【解决方案1】：

我会遍历 JSON 并按键添加属性。例如，您可以查询列表并添加每个值。

$("#MovieTitle").append("<li>" + json["category"] + "</li>")

对您要包含的每个键值对都这样做。

【讨论】：