英文:
How to view name a part of a JSON Object?
问题
问题出在 data.forEach(d => html += <option>${d.value}</option>) 这一行，我不确定应该在其中放什么以便将文件名打印到选择框中。
如果要将文件名打印到选择框中，你应该使用 d 代表的文件名，而不是 d.value。以下是修正后的 JavaScript 代码：
function getLines() {
fetch(`/application`, {
method: 'GET'
}).then(response => response.json())
.then(data => {
console.log(JSON.stringify(data))
let html = ""
data.forEach(d => html += `<option>${d}</option>`)
document.getElementById("test").innerHTML = html
})
}
这个修正将文件名直接插入到选项中，而不是尝试访问不存在的 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:
@RestController
@Slf4j
@RequestMapping("/application")
public class ApplicationController {
@GetMapping
public List<String> fileSelection() {
List<String> files = new ArrayList<>();
URL url = getClass().getClassLoader().getResource("placeholder.txt");
File dir = null;
try {
dir = new File(url.toURI()).getParentFile();
} catch (URISyntaxException e) {
throw new RuntimeException(e);
}
for (File f : dir.listFiles(path -> path.getName().contains(".txt"))) {
if (!f.getName().equals("placeholder.txt")) {
files.add(f.getName());
}
}
return files;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<select id="test"></select>
</body>
</html>
JavaScript:
function getLines() {
fetch(`/application`, {
method: 'GET'
}).then(response => response.json())
.then(data => {
console.log(JSON.stringify(data))
let html = ""
data.forEach(d => html += `<option>${d.value}</option>`)
document.getElementById("test").innerHTML = html
})
}
The Problem lies at the data.forEach(d => html += <option>${d.value}</option>) 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:
.then(data => document.getElementById("test").innerHTML = data
.map(filename => `<option value="${filename}">${filename}</option>`).join('')
);
since
data.map(arrayItem => console.log(arrayItem))
will show
"data.txt"
"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
.then(data => document.getElementById("test").innerHTML = data
.map(filename => `<option value="${filename}">${filename}</option>`).join('')
);
since
data.map(arrayItem => console.log(arrayItem))
will show
"data.txt"
"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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论