Javascript 从Json获取项目并使用JS编写

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">

我这里有个问题。我得到了这个带有嵌套类的html。问题是我需要从JSON中获取3个文本,并使它们以1-3的顺序显示在我的html中。我所做的最好的事情就是只展示了其中的一个。我想我在解析方面有问题,但我不是很确定。问题也可能出在“第n个孩子”身上。我可以使用任何提示或解决方案

您可以看到的“bla”类仅用于测试

<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);
        }
    }
};