使用没有TItle的JSON数据来更改文本框值

时间:2014-08-23 08:36:38

标签: jquery json

我尝试使用从PHP文件中检索的JSON值来更改文本框的值。不幸的是,我的JSON数组没有标题。如何选择用于更改值的数据?

我的数据:

[
    {
    id: 1027,
    title: "Latest",
    time: 1408588109727,
    description: "SADD meeting is at 2:00 on Friday",
    groupId: 1,
    schoolId: 1
    },
    {
    id: 1026,
    title: "SADD Meeting",
    time: 1408161600000,
    description: "SADD meeting is at 2:00 on Friday bucn of spaces ....",
    groupId: 1,
    schoolId: 1
    } ]

这是我的整个脚本:

            <script type="text/javascript">

            $(document).ready(function(){

                var counter = 1;
                var textboxNum = '<?php echo $titlenum; ?>'; 
                parseInt(textboxNum);

                while (counter - 1 < textboxNum) { 

                var newTextBoxDiv = $(document.createElement('div'))
                     .attr("id", 'TextBoxDiv' + counter); 
                newTextBoxDiv.after().html(
                      '<input type="text" class="title"' +
                      '" id="title' + counter + '" value="" name="title[]">');  
                var newTextAreaDiv = $(document.createElement('div'))
                      .attr("id", 'TextAreaDiv' + counter);       
                newTextAreaDiv.after().html(
                      '<textarea rows="4" cols="50" class="text"' +
                      '" id="text' + counter + '"value="" name="text[]" ></textarea>');       
                $('#Spacer')
                .prepend(
                   $(document.createElement('input')).attr({
                       id:    'myCheckbox'  + counter
                      ,name:  'myCheckbox' + counter
                      ,value: 'myValue'
                      ,type:  'checkbox'
                   })

                );        
                newTextBoxDiv.prependTo("#Spacer");
                newTextAreaDiv.prependTo("#Spacer");
                counter++;      
                }
                $.getJSON( "jsonData.php", function( data ) {
                for(var i=0; i < data.length; i++) {
                $('#title' + (i + 1)).attr('value', .data[i].title);
                }
                });

                $("#addButton").click(function () { 

                var newTextBoxDiv = $(document.createElement('div'))
                     .attr("id", 'TextBoxDiv' + counter); 
                newTextBoxDiv.after().html(
                      '<input type="text" class="title"' +
                      '" id="title' + counter + '" value="" name="title[]">');  
                var newTextAreaDiv = $(document.createElement('div'))
                      .attr("id", 'TextAreaDiv' + counter);       
                newTextAreaDiv.after().html(
                      '<textarea rows="4" cols="50" class="text"' +
                      '" id="text' + counter + '"value="" name="text[]" ></textarea>');       
                $('#Spacer')
                .prepend(
                   $(document.createElement('input')).attr({
                       id:    'myCheckbox'  + counter
                      ,name:  'myCheckbox' + counter
                      ,value: 'myValue'
                      ,type:  'checkbox'
                   })
                );        
                newTextBoxDiv.prependTo("#Spacer");
                newTextAreaDiv.prependTo("#Spacer"); 
                counter++;

                 });
                $("#removeButton").click(function () {
            if (counter == 2) {
              alert("Can't remove any more textboxes");
              return false;
            }      
              $('[id^=myCheckbox]').each(function(i){
                  if($(this).is(':checked')){
                      var getlastId=$(this).prop('id').substr(10);
                      $("#TextBoxDiv" + getlastId).remove();
                      $("#TextAreaDiv" + getlastId).remove();
                      $(this).remove();
                      counter--;
                  }
              }); 
              });


            });

     </script>

我的HTML:                 

            <div id='TextBoxesGroup' width='800px'>
                <div id="TextBoxDiv1" class="connor">
                <form role="form" method="post" form action="action.php">
                <div id="Spacer" width="800px" class="SpacerInput">
                    <input type="Submit" value="Save" id="saveButton" class="buttonThree">

                    <input type="button" value="Add" id="addButton" class="buttonOne">      
                    <input type="button" value="Remove Checked" id="removeButton" class="buttonTwo">
                    </div>
            </div>
            </form>
            </div>
            </body>

提前谢谢!

1 个答案:

答案 0 :(得分:1)

包含数组的变量的名称只是data,而不是json.data。当你从元素中获得标题时,不要在它周围加上引号。

$(document).ready(function(){
    $.getJSON( "jsonData.php", function( data ) {
        for(var i=0; i < data.length; i++) {
            $('#form' + i + ' input[type="text"]').attr('value', data[i].title);
        }
    });
});