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

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

jquery json

Jquery 打印所有json对象，包括图片？,jquery,json,Jquery,Json,当我单击“alleLand”按钮时，我需要一些帮助来打印所有JSON对象，其中包括名称、城镇和图片。对使用JSON非常陌生，所以我不知道自己在做什么。希望有人能帮忙 <body> <div> <h3 id="header">Mitt feriested</h3> <label>Land: <input id="land" type="text">

当我单击“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>


米特·费里斯特德
土地：
var feriestederJSON={landiste:[
{“土地”：“Tyskland”，
“作者”：“Munchen”，
“bildeAvBy”：“munchen.jpg”
},
{“土地”：“Tyskland”，
“作者”：“柏林”，
“bildeAvBy”：“berlin.jpg”
},
{“土地”：“西班牙”，
“作者”：“巴塞罗那”，
“bildeAvBy”：“barcelone.jpg”
},
{“土地”：“西班牙”，
“作者”：“帕尔玛”，
“bildeAvBy”：“palma.jpg”
},
{“土地”：“挪威人”，
“作者”：“奥斯陆”，
“Bildevby”：“oslo.jpg”
},
{“土地”：“挪威人”，
“作者”：“卑尔根”，
“Bildevby”：“bergen.jpg”
},
]};
$（函数（）{
$（文档）。在（'click'，'#alleLand'，函数（）上{
var antallLand=feriestederJSON.landiste.length；
对于（var i=0；i

到目前为止，一切似乎都正常。您希望使用打印机打印它，或者只是希望在网页中以html格式查看它。？要在html元素中输出它，比如说一个div，您只需添加一行将结果附加到该div中即可。您的代码可能如下所示：

$（函数（）{
$（文档）。在（'click'，'#alleLand'，函数（）上{
var antallLand=feriestederJSON.landiste.length；
对于（var i=0；i'+by+'
'+bildeAvBy+'
'+'
'）；
}
})；

只需创建一个用于保存列表的新元素，在循环外创建一个新的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;

var输出\u html=''；
对于（var i=0；i'；
}
document.querySelector（“#land_list”）.innerHTML=output_html；

编辑-由于代码未运行： 最好在元素本身或基于JavaScript的事件监听器上使用onclick，而不是基于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;
}

function list\u json\u data（）{
var feriestederJSON…//确保替换此
变量输出_html=“”；
对于（var i=0；i'；
}
document.querySelector（“#land_list”）.innerHTML=output_html；
}

什么是“打印”是吗？正在将HTML写入页面？我无法实现这一点。当我按下alleLand按钮时，我仍然没有得到任何输出。即使一切看起来都正常。@SophieMarker向解决方案添加了其他信息。我希望在网页中以HTML的形式看到它。但无论此时按什么，我都没有得到任何输出。只需添加一个HTML元素，例如div in你想把结果放出来，把所有的东西都放进去。