时间戳

首页 > 解决方案 > 从 Json 获取项目并用 JS 编写

javascript - 从 Json 获取项目并用 JS 编写

问题描述

我这里有问题。我得到了这个带有嵌套类的 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?"
}
';

这是 JavaScrpt 部分

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

我没有收到任何控制台错误，输出为 3 k:1 在此处输入图像描述

标签： javascriptjqueryhtmljsonnested

解决方案

干得好。您需要使用 jQuery:eq 按索引抓取元素。此外，无需重写“k”。

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;
  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){
              $('.info-label-class').eq(k).html(obj.info[i].infoPersonalInfo[j].infoLabel[k].text);
          }
      }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</form>

推荐阅读