#javascript #json
#javascript #json
Вопрос:
У меня есть файл JSON, из которого я хочу создать динамические html-элементы со значениями JSON. Ниже приведен файл JSON:
{
"india": [
{
"position": "left",
"imgurl":"3.jpg"
},
{
"position": "right",
"imgurl":"2.jpg"
},
{
"position": "left",
"imgurl":"3.jpg"
},
{
"position": "right",
"imgurl":"2.jpg"
}
],
"aus": [
{
"position": "left",
"imgurl":"4.jpg"
},
{
"position": "right",
"imgurl":"2.jpg"
},
{
"position": "left",
"imgurl":"3.jpg"
},
{
"position": "right",
"imgurl":"2.jpg"
}
]
}
Ниже приведен HTML-файл с кодом Javascript:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event) {
$.getJSON('list1.json', function(data) {
$.each(data.india, function (key, val) {
$('.ms-left').append('<div class="ms-section ' val.position '" id="left3"><img src="' val.imgurl '"></div>');
});
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage" style = "background-color:#cc0;">
STAGE</div>
<ul id="ul"></ul>
<div class="ms-left"></div>
<input type = "button" id = "driver" value = "india" />
<ul id="menu" class="">
<li><a href="" data-value="india">India</a></li>
<li><a href="" data-value="aus">Australia</a></li>
<li><a href="" data-value="usa">USA</a></li>
</ul>
</body>
</html>
Я хочу предоставить динамическую переменную для каждой функции, т.Е. $.each(data.india) .. Я хочу изменить India на AUS, USA динамически означает data.india, data.aus и т. Д., Чтобы .each создавать и извлекать значения из JSON в зависимости от параметров. Пожалуйста, помогите.
Как я могу передать динамический параметр в .each цикл, который поможет мне извлекать данные на основе стран, определенных в JSON? В настоящее время я могу статически изменять data.india, data.aus для извлечения значения, но я хочу, чтобы это выполнялось динамически.
У меня есть структура li выше в коде. Моя цель состоит в том, чтобы, когда я нажму на ссылку для Индии, она попадет в файл JSON со значением India и получит данные India, так же, как когда я нажму на ссылку AUS, он получит данные AUS из JSON.
Ответ №1:
@makemelive Пара предложений:
- Поместите JS-код в конец
<body>тега, а не внутри<head>. - Используйте согласованные отступы, либо табуляции, либо пробелы, предпочитайте пробелы, поскольку они универсальны.
И вот решение вашей проблемы:
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
<div id="stage" style="background-color:#cc0;">STAGE</div>
<div class="ms-left"></div>
<ul id="menu" class="countries">
<li><a href="#" data-value="india">India</a></li>
<li><a href="#" data-value="aus">Australia</a></li>
<li><a href="#" data-value="usa">USA</a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var json = {
"india": [
{
"position": "left",
"imgurl": "3.jpg"
},
{
"position": "right",
"imgurl": "2.jpg"
},
{
"position": "left",
"imgurl": "3.jpg"
},
{
"position": "right",
"imgurl": "2.jpg"
}
],
"aus": [
{
"position": "left",
"imgurl": "4.jpg"
},
{
"position": "right",
"imgurl": "2.jpg"
},
{
"position": "left",
"imgurl": "3.jpg"
},
{
"position": "right",
"imgurl": "2.jpg"
}
]
};
</script>
<script>
var populate = function (country) {
$('.ms-left').empty();
$.each(json[country], function (key, value) {
var _div = $('<div>')
.addClass('ms-section')
.addClass(value.position)
.append($('<img>').attr('src', value.imgurl));
$('.ms-left').append(_div);
});
};
$(document).ready(function() {
/**
* Get your JSON here and store it in a local variable,
* loading the file for each case is not a good practice
* if the file is always the same.
*/
$('.countries a').each(function() {
$(this).on('click', populate.bind(this, $(this).data('value')));
});
});
</script>
</body>
</html>
Комментарии:
1. Привет, большое спасибо за это .. не могли бы вы сообщить мне, хочу ли я сначала сгенерировать позицию: сначала левые значения, а затем правые значения, например :—
2. Хотите сгенерировать так: — <div class=»ms-left»> <div class=»ms-section left» id =»left1″> <img src=»images/img-1.jpg «> </div>> <img src=»images/img-2.jpg «> </div> <div class=»ms-раздел слева» id=»left3″> <img src=»images/img-3.jpg «> </div> </div>
3. Все левые значения в одном div и все правильные значения в другом div… Я вставляю свою HTML-структуру ниже того, как я хочу сгенерировать: — НИЖЕ НАХОДИТСЯ ЛЕВЫЙ РАЗДЕЛ <div class=»ms-left»> <div class=»ms-section left» id =»left1″> <img src=»images/img-1.jpg «> </div>=»ms-section left» id =»left2″> <img src=»images/img-2.jpg «> </div> <div class=»ms-раздел слева» id=»left3″> <img src=»images/img-3.jpg «> </div> </div>
4. НИЖЕ ПРИВЕДЕН ПРАВЫЙ РАЗДЕЛ <div class=»ms-right»> <div class=»ms-section» id=»right1″> <img src=»images/img-4.jpg «> </div> <div class=»ms-section» id=»right2″>=»images/img-5.jpg «> </div> <div class=»ms-section» id=»right3″> <img src=»images/img-6.jpg «> </div> </div>
5. @makemelive хотя я рад помочь, stackoverflow.com на самом деле это не сообщество, где люди будут выполнять вашу работу, мы здесь для того, чтобы помочь вам решить проблемы. Ответ, который я дал вам раньше, в значительной степени решал всю проблему. Следующая задача, которую вы пытаетесь выполнить, — это просто вопрос логики, и я уверен, что вы сможете с этим справиться. 🙂