Javascript 从Json获取项目并使用JS编写
我这里有个问题。我得到了这个带有嵌套类的html。问题是我需要从JSON中获取3个文本,并使它们以1-3的顺序显示在我的html中。我所做的最好的事情就是只展示了其中的一个。我想我在解析方面有问题,但我不是很确定。问题也可能出在“第n个孩子”身上。我可以使用任何提示或解决方案 您可以看到的“bla”类仅用于测试Javascript 从Json获取项目并使用JS编写,javascript,jquery,html,json,nested,Javascript,Jquery,Html,Json,Nested,我这里有个问题。我得到了这个带有嵌套类的html。问题是我需要从JSON中获取3个文本,并使它们以1-3的顺序显示在我的html中。我所做的最好的事情就是只展示了其中的一个。我想我在解析方面有问题,但我不是很确定。问题也可能出在“第n个孩子”身上。我可以使用任何提示或解决方案 您可以看到的“bla”类仅用于测试 <form method="POST" action="#" id="data-form"> <div class="info">
<form method="POST" action="#" id="data-form">
<div class="info">
<div class="input-personal-info">
<div class="info-label">
<label class="info-label-class bla" for="name">
</label>
</div>
<div class="info-input">
<input id="name" class="info-input-class" type="text"
name="Name" placeholder="Enter your name" required>
</div>
</div>
<div class="input-personal-info">
<div class="info-label">
<label class="info-label-class" for="email"></label>
</div>
<div class="info-input">
<input id="email" class="info-input-class"
type="email" name="Mail" placeholder="Enter your Email" required>
</div>
</div>
<div class="input-personal-info">
<div class="info-label">
<label class="info-label-class"></label>
</div>
<div class="info-input">
<input class="info-input-class" type="number"
name="age" placeholder="Age" required>
</div>
</div>
</div>
这是JSON
var json ='
{
"formTitle":"Survey Form",
"letUsnow":"Let us know how we can improve freeCodeCamp",
"info":[
{
"infoPersonalInfo":[
{
"infoLabel":[
{
"text":"<sup </sup>Name:"
},
{
"text":"<sup>* </sup>Email:"
},
{
"text":"<sup>* </sup>Age:"
}
]
}
]
}
],
"roleOptionsLabel":"Which option best describes your current role?",
"reccomendLabel":"<sup>* </sup>How likely is that you would recommend freeCodeCamp to a friend?",
"fccLabel":"What do you like most in FCC:",
"improvedLabel":"Things that should be improved in the future(Check all that apply):",
"commentsLabel":"Comments or Suggestions?"
}
';
var='json'
{
“表格标题”:“调查表格”,
“letUsnow”:“让我们知道如何改进freeCodeCamp”,
“信息”:[
{
“infoPersonalInfo”:[
{
“信息标签”:[
{
“text”:“给您。您需要使用jQuery:eq按索引获取元素。此外,无需重写“k”
var json={
“表格标题”:“调查表格”,
“letUsnow”:“让我们知道如何改进freeCodeCamp”,
“信息”:[
{
“infoPersonalInfo”:[
{
“信息标签”:[
{
“text”:“给您。您需要使用jQuery:eq按索引获取元素。此外,无需重写“k”
var json={
“表格标题”:“调查表格”,
“letUsnow”:“让我们知道如何改进freeCodeCamp”,
“信息”:[
{
“infoPersonalInfo”:[
{
“信息标签”:[
{
“text”:“您的JSON
格式不正确。请修复它。我的意思是,我现在已经修复了它。仍然没有找到解决方案。var k=parseInt(I)+parseInt(j)+1;这是你的问题,在这个json中i和j始终为0,+1这是你总是得到k:1的原因。请记住,这里的计数从0开始。如果你在不进行任何计算的情况下仅记录k,那么树文本将得到k:0 k:1 k:2messages@BojanKolano因为在第一个和第二个数组中只有一个元素。数组计数开始从零开始(0)。@BojanKolano我建议你在这个网站上提高JS技能:你的JSON
格式不正确。修复它。我的意思是,我现在已经修复了。仍然没有找到解决方案。var k=parseInt(I)+parseInt(j)+1;这是你的问题,在这个json中i和j始终为0,+1这是你总是得到k:1的原因。请记住,这里的计数从0开始。如果你在不进行任何计算的情况下仅记录k,那么树文本将得到k:0 k:1 k:2messages@BojanKolano因为在第一个和第二个数组中只有一个元素。数组计数开始从零开始。@BojanKolano我建议你在这个网站上提高你的JS技能:哇,这很有效!你能给我一个解释吗?“k"包含JSON infoLabel对象的基0索引。因为您在那里有3个元素,HTML中有3个元素,所以您可以重用该索引来检索要在其中呈现文本的HTML元素。为此,您可以使用jQuery将所有.info label类作为目标,然后使用eq执行子过滤器。该子过滤器将为您提供与在索引处。看一看:啊,我明白了。谢谢!这帮了大忙:)哇,这很有效!你能给我解释一下吗?“k”包含JSON infoLabel对象的基0索引。因为您在那里有3个元素,HTML中有3个元素,所以您可以重用该索引来检索要在其中呈现文本的HTML元素。为此,您可以使用jQuery将所有.info label类作为目标,然后使用eq执行子过滤器。该子过滤器将为您提供与在索引处。看一看:啊,我明白了。谢谢!这帮了大忙:)
var json ='{"formTitle":"Survey Form","letUsnow":"Let us know how we can
improve freeCodeCamp","info":[{"infoPersonalInfo":[{"infoLabel":[{"text":"
<sup>*
</sup>Name:"},{"text":"<sup>* </sup>Email:"},{"text":"<sup>*
</sup>Age:"}]}]}],"roleOptionsLabel":"Which option best describes your
current
role?","reccomendLabel":"<sup>* </sup>How likely is that you would recommend
freeCodeCamp to a friend?","fccLabel":"What do you like most in
FCC:","improvedLabel":"Things that should be improved in the future(Check all
that apply):","commentsLabel":"Comments or Suggestions?"}';
$(document).ready(function(){
var obj = JSON.parse(json);
divTitle(obj);
divForm(obj);
});
function divTitle(obj){
$('.form-title').text(obj.formTitle);
};
function divForm(obj){
$('#paraf').text(obj.letUsnow);
for(i in obj.info){
for(j in obj.info[i].infoPersonalInfo){
for(k in obj.info[i].infoPersonalInfo[j].infoLabel){
var k = parseInt(i) + parseInt(j) + 1 ;
console.log("k:" + k);
//$('.bla').html(obj.info[i].infoPersonalInfo[j].infoLabel[k].text);
$('.info-label:nth-child(' + k + ').info-label-
class').html(obj.info[i].infoPersonalInfo[j].infoLabel[k].text);
}
}
};