Имеется html файл с несколькими формами ввода, текст из которых нужно вставить в плейсхолдеры текста (обозначены фигурными скобками), получаемого из JSON.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Ryaba Chicka</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Курочка Ряба</h1>
<form>
<input id="1st" type="text" placeholder="var1"/>
<input id="2nd" type="text" placeholder="var2"/>
<input id="3rd" type="text" placeholder="var3"/>
<input id="4th" type="text" placeholder="var4"/>
<input id="5th" type="text" placeholder="var5"/>
<input id="6th" type="text" placeholder="var6"/>
<input id="7th" type="text" placeholder="speach"/>
<button type="button" class="btn">Создать</button>
</form>
<div class="result"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Пробую постепенно модифицировать скрипт от простого к сложному, удалось вывести текст, но надо заменить его в фигурных скобках на соответствующий input. Как это сделать? js-скрипт:
//обработчик клика
$(document).ready(function(){
$('.btn').click(function(){
$.getJSON('https://api.myjson.com/bins/jcmhn',
function(data){
$(".result").html(data.text);
}
);
}
);
}
);
Попытка применить ответ, не дала работу кода. HTML выводит мертвый.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Ryaba Chicka</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Курочка Ряба</h1>
<form>
<input id="1st" type="text" placeholder="var1"/>
<input id="2nd" type="text" placeholder="var2"/>
<input id="3rd" type="text" placeholder="var3"/>
<input id="4th" type="text" placeholder="var4"/>
<input id="5th" type="text" placeholder="var5"/>
<input id="6th" type="text" placeholder="var6"/>
<input id="7th" type="text" placeholder="speach"/>
<button type="button" class="btn">Создать</button>
</form>
<div class="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function(){
$('.btn').click(function(){
$.getJSON('https://api.myjson.com/bins/jcmhn',
function(data){
zzz = data.text;
$.each($('input'), function (key1, value1) {
varr = $(value1).attr('placeholder');
varr1 = '{' + varr + "}";
text = value1.value; // Значение поля ввода
$.each(zzz, function (key2,value2) {
zzz[key2] = value2.replace(varr1, text);
});
});
$(".result").html(zzz);
}
);
}
);
}
);
data.text
это массив – teran 22 янв '20 в 12:26