如何查看JSON对象的一部分名称?

huangapple go评论117阅读模式
英文:

How to view name a part of a JSON Object?

问题

问题出在 data.forEach(d => html += <option>${d.value}</option>) 这一行,我不确定应该在其中放什么以便将文件名打印到选择框中。

如果要将文件名打印到选择框中,你应该使用 d 代表的文件名,而不是 d.value。以下是修正后的 JavaScript 代码:

  1. function getLines() {
  2. fetch(`/application`, {
  3. method: 'GET'
  4. }).then(response => response.json())
  5. .then(data => {
  6. console.log(JSON.stringify(data))
  7. let html = ""
  8. data.forEach(d => html += `<option>${d}</option>`)
  9. document.getElementById("test").innerHTML = html
  10. })
  11. }

这个修正将文件名直接插入到选项中,而不是尝试访问不存在的 d.value 属性。

英文:

I am testing out a new way to use Springboot and having trouble with a JSON Object that holds a few filenames. I am having trouble reading the filenames from the object, as I do not really know what they are called.

Controller:

  1. @RestController
  2. @Slf4j
  3. @RequestMapping(&quot;/application&quot;)
  4. public class ApplicationController {
  5. @GetMapping
  6. public List&lt;String&gt; fileSelection() {
  7. List&lt;String&gt; files = new ArrayList&lt;&gt;();
  8. URL url = getClass().getClassLoader().getResource(&quot;placeholder.txt&quot;);
  9. File dir = null;
  10. try {
  11. dir = new File(url.toURI()).getParentFile();
  12. } catch (URISyntaxException e) {
  13. throw new RuntimeException(e);
  14. }
  15. for (File f : dir.listFiles(path -&gt; path.getName().contains(&quot;.txt&quot;))) {
  16. if (!f.getName().equals(&quot;placeholder.txt&quot;)) {
  17. files.add(f.getName());
  18. }
  19. }
  20. return files;
  21. }
  22. }

HTML:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;title&gt;Title&lt;/title&gt;
  6. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;select id=&quot;test&quot;&gt;&lt;/select&gt;
  11. &lt;/body&gt;
  12. &lt;/html&gt;

JavaScript:

  1. function getLines() {
  2. fetch(`/application`, {
  3. method: &#39;GET&#39;
  4. }).then(response =&gt; response.json())
  5. .then(data =&gt; {
  6. console.log(JSON.stringify(data))
  7. let html = &quot;&quot;
  8. data.forEach(d =&gt; html += `&lt;option&gt;${d.value}&lt;/option&gt;`)
  9. document.getElementById(&quot;test&quot;).innerHTML = html
  10. })
  11. }

The Problem lies at the data.forEach(d => html += &lt;option&gt;${d.value}&lt;/option&gt;) line, where I am just not sure what to put in there in order to print the filenames into the selection.

答案1

得分: 1

In the comment you say data is an array. Since you already trust the data enough to use innerHTML, we can do the following:

  1. .then(data => document.getElementById("test").innerHTML = data
  2. .map(filename => `<option value="${filename}">${filename}</option>`).join('')
  3. );

since

  1. data.map(arrayItem => console.log(arrayItem))

will show

  1. "data.txt"
  2. "data2.txt"

and I just wrap that in <option value="arrayItem">arrayItem</option> using template literals in a NEW array I then immediately join with nothing to make

<option value="data.txt">data.txt</option><option value="data2.txt">data2.txt</option>

before inserting it into the select.

英文:

In the comment you say data is an array.
Since you already trust the data enough to use innerHTML, we can do the following

  1. .then(data =&gt; document.getElementById(&quot;test&quot;).innerHTML = data
  2. .map(filename =&gt; `&lt;option value=&quot;${filename}&quot;&gt;${filename}&lt;/option&gt;`).join(&#39;&#39;)
  3. );

since

  1. data.map(arrayItem =&gt; console.log(arrayItem))

will show

  1. &quot;data.txt&quot;
  2. &quot;data2.txt&quot;

and I just wrap that in &lt;option value=&quot;arrayItem&quot;&gt;arrayItem&lt;/option&gt; using template literals in a NEW array I then immediately join with nothing to make

&lt;option value=&quot;data.txt&quot;&gt;data.txt&lt;/option&gt;&lt;option value=&quot;data2.txt&quot;&gt;data2.txt&lt;/option&gt;

before inserting it into the select

huangapple
  • 本文由 发表于 2023年7月6日 20:37:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76628916.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定