加载 JSON 对象值并将它们附加到文本区域中答案

【问题标题】：Load JSON objects values and append them in a textarea加载 JSON 对象值并将它们附加到文本区域中
【发布时间】：2017-05-17 02:41:34
【问题描述】：

我正在使用 filestack 在 JSON 对象中获取文档信息，但是当我上传许多文件时，我想将这些 JSON 值附加到文本区域中。

所以，我在 HTML 中有这个：

<input id="ff" type="filepicker" data-fp-apikey="myAPI" data-fp-mimetypes="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" data-fp-container="modal" data-fp-multiple="true" data-fp-button-class="btn btn-primary l-align" data-fp-button-text="Upload" data-fp-services="SKYDRIVE,COMPUTER,URL,GOOGLE_DRIVE,GMAIL" data-fp-language="en">
<textarea id="json1" name="json1" cols="30" rows="2"></textarea>
<textarea id="json" name="json" cols="30" rows="2"></textarea>

在 JS 中：

for(var i=0;i<event.fpfiles.length;i++){
  var link = event.fpfiles[i].url;
  var idfile = link.substr(link.lastIndexOf("/")+1);
  var lcconvert = "https://process.filestackapi.com/output=docinfo:true/"+idfile;

  $("#json1").load(lcconvert);
  document.getElementById('json').value += 
  document.getElementById('json1').value;                   
}

我想加载 textarea #json1 中的每个值并将它们附加到 textarea #json 但我只得到 #json1 中最后一个文件的 json 值，如下所示：

<textarea id="json1" name="json1" cols="30" rows="2" style="display:none;">{"numpages":2,"dimensions":{"width":612,"height":792}}</textarea>

我想要这个在#json 中：

<textarea id="json" name="json" cols="30" rows="2" style="display:none;">{"numpages":2,"dimensions":{"width":612,"height":792}}{"numpages":6,"dimensions":{"width":612,"height":792}}</textarea>

我需要一些帮助

【问题讨论】：

不要使用纯JS添加内容，而是使用append()，并且您需要在加载请求完成时运行更新#json的代码。它是异步的，因此代码不会停止并等待load() 使用回调完成。请参阅 jquery 文档。
感谢您的评论，我找到了解决方案！

标签： javascript jquery html json

【解决方案1】：

感谢 GillesC 的评论，我找到了解决方案：

$("#json1").load(lcconvert, function(result){
    $("#json").append(result);
});

编辑：现在我还需要添加每个 url 文件，所以我做了这个：

$("#json1").load(lcconvert, function(result){
    $("#json").append(result + " "+link);
});

但我只得到最后一个 url 文件，像这样在 HTML 中：

<textarea id="json" name="json" cols="30" rows="2" style="display:none;">
{"numpages":2,"dimensions":{"width":612,"height":792}} <url_of_last_file>
{"numpages":6,"dimensions":{"width":595,"height":842}} <url_of_last_file>
</textarea>

我想要这样：

<textarea id="json" name="json" cols="30" rows="2" style="display:none;">
{"numpages":2,"dimensions":{"width":612,"height":792}} <url_of_file1>
{"numpages":6,"dimensions":{"width":595,"height":842}} <url_of_file2>
</textarea>

我怎样才能改变它？

【讨论】：