选择一组特定的JSON数据onClick

时间：2019-04-19 12:22:18

标签： javascript jquery json

我有一个JSON对象，就像这样：

var facilityDetails = 
    [
        {
        "level": 1, "LocationId": 1, "LocationName": "This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis", "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 2, "LocationName": "Facility 2",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 3, "LocationName": "Facility 3",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 4, "LocationName": "Facility 4",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 5, "LocationName": "Facility 5",  "ParentLocationId": 0, "description": "Test Facility",
        }
]

我正在遍历这些数据以动态创建项目列表。我要这样做，以便在单击某项时显示与该特定数据集有关的信息。

3 个答案:

答案 0 :(得分：0)

这是示例代码。
从JSON对象生成按钮，并将索引设置为按钮的值。
然后单击一个按钮，将显示与单击的按钮有关的信息。

JavaScript：

71.19.248.193 - - [19/Apr/2019:11:57:14 +0100] "GET /setup/setup.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:15 +0100] "GET /ilias/setup/setup.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:15 +0100] "GET /ILIAS/setup/setup.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:15 +0100] "GET /phpshop/index.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:15 +0100] "GET /cgi-bin/setup/setup.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:16 +0100] "GET /phpip/login.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:17 +0100] "GET /FreeDirectory/index.php HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:17 +0100] "GET /nosuchfile-10303-10310.php3 HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:18 +0100] "GET /booked/Web/? HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"
71.19.248.193 - - [19/Apr/2019:11:57:18 +0100] "GET /Web/? HTTP/1.1" 404 1066 "-" "Mozilla/5.0 [en] (X11, U; OpenVAS-VT 9.0.3)"

HTML：

$(function() {
  var options = '';
  for (var i = 0; i < facilityDetails.length; i++) {
    options += '<button class="optbtn" value="' + i + '">' + i + '</button>'
  }
  $('#options').html(options);

  $('.optbtn').click(function() {
     var index = $(this).val();
     var details = facilityDetails[index];

     var info = '';
     for (key in details) {
       info += key + ': ' + details[key] + '<br>';
     }
     $('#info').html(info);
  });
});

答案 1 :(得分：0)

这是示例代码。 我使用JQuery和Javascript添加了示例解决方案。这将为您提供所需的答案。

 var facilityDetails =
        [
            {
            "level": 1, "LocationId": 1, "LocationName": "This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis", "ParentLocationId": 0, "description": "Test Facility",
            },
            {
            "level": 1, "LocationId": 2, "LocationName": "Facility 2", "ParentLocationId": 0, "description": "Test Facility",
            },
            {
            "level": 1, "LocationId": 3, "LocationName": "Facility 3", "ParentLocationId": 0, "description": "Test Facility",
            },
            {
            "level": 1, "LocationId": 4, "LocationName": "Facility 4", "ParentLocationId": 0, "description": "Test Facility",
            },
            {
            "level": 1, "LocationId": 5, "LocationName": "Facility 5", "ParentLocationId": 0, "description": "Test Facility",
            }
        ]  

    function bindDataSet() {
        var html = "";

        for (var i = 0; i < facilityDetails.length; i++) {
            html += "<li onclick='viewDetail(" + facilityDetails[i].LocationId +")' class='textLimit form-control' id=" + facilityDetails[i].LocationId + ">" + facilityDetails[i].LocationName + " </li>"
        }

        $("#facilityList").append(html);
     }

    function viewDetail(id) {
        var facilityDetail = facilityDetails.filter(x => x.LocationId === id);
        if (facilityDetail && facilityDetail.length > 0) {
            var detail = facilityDetail[0];

            var html = "<li> level :" + detail.level + " </li>";
            html += "<li> LocationId : " + detail.LocationId + " </li>";
            html += "<li> LocationName : " + detail.LocationName + " </li>";           
            html += "<li> ParentLocationId : " + detail.ParentLocationId + " </li>";
            html += "<li> description : " + detail.description + " </li>";

            $("#facilityDetail").text("")
            $("#facilityDetail").append(html);
        }        
    }

    $(document).ready(function () {
            bindDataSet();
    });
 .textLimit {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

        .textLimit:hover {
            cursor : pointer;
        }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<div class="row">
    <div class="col-md-3">
        <ul id="facilityList">

        </ul>
    </div>
</div>
<div class="row">
    <div>
        <ul id="facilityDetail">

        </ul>
    </div>
</div>

答案 2 :(得分：0)

以下遍历数组中的每个元素，为每个要显示在屏幕上的数据点创建UI元素并设置其样式，附加相应的数据< / strong>到该元素，然后绑定点击事件以在点击时显示适当的数据：

var facilityDetails = 
    [
        {
        "level": 1, "LocationId": 1, "LocationName": "This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis", "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 2, "LocationName": "Facility 2",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 3, "LocationName": "Facility 3",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 4, "LocationName": "Facility 4",  "ParentLocationId": 0, "description": "Test Facility",
        },
        {
            "level": 1, "LocationId": 5, "LocationName": "Facility 5",  "ParentLocationId": 0, "description": "Test Facility",
        }
]


$.each(facilityDetails, function(index ,elem) {
    $('body').append("<div class='this_elem' style='background:grey; color:white; padding: 10px; cursor: pointer'>" + elem.level + "</div>")
    $('.this_elem').eq(index)
    .data('LocationId', elem.LocationId)
    .data('LocationName', elem.LocationName)
    .data('ParentLocationId', elem.ParentLocationId)
    .data('description', elem.description)
    .click(function() {
    alert($(this).data('LocationId') + '\n' + $(this).data('LocationName') + '\n' + $(this).data('ParentLocationId') + '\n' + $(this).data('description'))
    })
    $('body').append("<br><br>")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Fiddle

相关问题
最新问题