Question

当我点击“alleLand”按钮（包括姓名，城镇和图片）时，我需要一些帮助来尝试打印所有JSON对象。使用JSON真的很新，所以我真的不知道我在做什么。希望有人可以提供帮助！

<body>
    <div>
        <h3 id="header">Mitt feriested</h3>
        <label>Land:
            <input id="land" type="text">
        </label>
        <input id="sokLand" class="landBtn" type="button" value="Søk etter land">
        <input id="alleLand" class="landBtn "type="button" value="Velg alle destinasjoner">
    </div>     

    <script src="scripts/jquery-3.2.0.min.js"></script>
    <script>

        var feriestederJSON = { landliste: [
            {"land": "Tyskland", 
             "by": "Munchen", 
             "bildeAvBy": "munchen.jpg"
            },
            {"land": "Tyskland", 
             "by": "Berlin", 
             "bildeAvBy": "berlin.jpg"
            },
            {"land": "Spania", 
             "by": "Barcelona", 
             "bildeAvBy": "barcelone.jpg"
            },
            {"land": "Spania", 
             "by": "Palma", 
             "bildeAvBy": "palma.jpg"
            },
            {"land": "Norge", 
             "by": "Oslo", 
             "bildeAvBy": "oslo.jpg"
            },
            {"land": "Norge", 
             "by": "Bergen", 
             "bildeAvBy": "bergen.jpg"
            },
        ]};

        $(function() {
          $(document).on('click','#alleLand',function() {
              var antallLand = feriestederJSON.landliste.length;
              for(var i = 0; i < antallLand; i++){
                  var land = feriestederJSON.landliste[i].land;
                  var by = feriestederJSON.landliste[i].by;
                  var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy;
              }
          });
        }
    </script>

</body>

Answer 1

到目前为止，一切似乎都是正确的。您想使用打印机打印它，或者只是想在网页中以html的形式看到它。要在html元素中输出它，比如一个div，你可以简单地添加一行来在该div中追加结果。您的代码如下：

$(function() {
          $(document).on('click','#alleLand',function() {
              var antallLand = feriestederJSON.landliste.length;
              for(var i = 0; i < antallLand; i++){
                  var land = feriestederJSON.landliste[i].land;
                  var by = feriestederJSON.landliste[i].by;
                  var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy;
                   $('#DivOutPut').append(land + '<br />' + by+'<br />'+bildeAvBy + '<br />' + '<br />' );
              }
          });

<div id="DivOutPut"></div>

Answer 2

只需创建一个新元素，用于保存列表，在循环外部创建一个新的javascript变量，并将要显示的html字符串附加到其中。然后用变量替换你创建的元素的innerHTML。

示例元素：

<ul id="land_list"></ul>

除了代码：

    var output_html = '';

    for(var i = 0; i < antallLand; i++){
        var land = feriestederJSON.landliste[i].land;
        var by = feriestederJSON.landliste[i].by;
        var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy;

        output_html += '<li>' + land + ', ' + by + ', <img src="' + bildeAvBy + '" /></li>';            
    }

    document.querySelector("#land_list").innerHTML = output_html;

编辑 - 因为代码没有运行： 最好使用onclick元素本身或基于JavaScript的事件监听器而不是基于jQuery的事件监听器。将列表方法移动到一个函数中并单击运行该函数。

<input id="alleLand" class="landBtn "type="button" value="Velg alle destinasjoner" onclick="list_json_data();">

使用Javascript：

function list_json_data() {
   var feriestederJSON ... // Make sure to replace this
   var output_html = '';

    for(var i = 0; i < antallLand; i++){
        var land = feriestederJSON.landliste[i].land;
        var by = feriestederJSON.landliste[i].by;
        var bildeAvBy = feriestederJSON.landliste[i].bildeAvBy;

        output_html += '<li>' + land + ', ' + by + ', <img src="' + bildeAvBy + '" /></li>';            
    }

    document.querySelector("#land_list").innerHTML = output_html;
}

打印出所有json对象，包括图片？

2 个答案: