Jquery 将文本加载到 div - 多个值/div

Question

我有一个包含多行的文本文件，需要将其加载到不同的 div 中。文本文件如下所示：

Jon
Doe
25

Jane
Doe
37

Foo
Bar
18

如何加载此文件并填充以下 div？

<input id="firstname" type="text"></input>
<input id="lastname" type="text"></input>
<input id="age" type="text"></input>

<input id="firstname1" type="text"></input>
<input id="lastname1" type="text"></input>
<input id="age1" type="text"></input>

<input id="firstname2" type="text"></input>
<input id="lastname2" type="text"></input>
<input id="age2" type="text"></input>

加载div

   $(".myDiv").load("myFile.txt");  

使用 json 或 csv 也不是不可能的......

Answer 1

var strings = fileTextBlob.split('\n');
$(".myDiv").children("input").each(function(index, inputEl){
    var tmpStr = strings.shift();
    //Catch empty lines. Could add more logic to catch strings of all spaces, etc.
    while(!tmpStr && typeof(tmpStr) !== "undefined"){
        tmpStr = strings.shift();
    }
    $(inputEl).text(tmpStr);
})

Answer 2

将数据排列为对象的 json 数组

var data = [
  {
    "firstname": "Jon",
    "lastname": "Doe",
    "age": 25
    },  {
      "firstname": "Jone",
      "lastname": "Doee",
      "age": 21
    }
  ]

然后使用 JQuery 你可以构建 div

var body = $('body');
$.each(data, function(index, value){
  body.append($('<input type="text" id="firstname' + index + '" >').text(value.firstname));
  body.append($('<input type="text" id="lastname' + index + '" >').text(value.lastname));
  body.append($('<input type="text" id="age' + index + '" >').text(value.age));
}

编辑 - 你可以使用getJSON来加载json文件

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});