Jquery div-multiple values/divsにテキストを読み込む

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> 

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

はJSONまたはCSVを使用してdiv要素をロードする

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

編集 - あなたはJSONファイルをロードするためにgetJSONを使用することができます

$.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"); 
});