我有一个如下的json对象
{"Title":"asb","Date":"2019","Other":"not important"}
读取此对象并在<ul><li>
中进行渲染的正确方法是什么?
注意
我通过使用map()
将此状态分配给一个状态并对其进行迭代来进行了尝试,但是它不起作用。
答案 0 :(得分:2)
map
只能用于Array,不能用于Object。使用Object.entries
首先将对象转换为数组
const data = {"Title":"asb","Date":"2019","Other":"not important"}
const App = () =>
<ul>
{
Object.entries(data).map(([key, val]) => <li>{key}: {val}</li>)
}
</ul>
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
答案 1 :(得分:2)
这是一个对象,因此map
将不起作用。而是遍历Object.entries
:
const object = {"Title":"asb","Date":"2019","Other":"not important"};
Object.entries(object).forEach(([key, value]) => document.getElementById("list").innerHTML += `<li>${key}: ${value}</li>`);
<ul id="list"></ul>
答案 2 :(得分:1)
对于object,您可以使用for循环,map最好用于数组类型
var data = {"Title":"asb","Date":"2019","Other":"not important"};
for(var i in data) {
var htm = `<li>${i} : ${data[i]}</li>`;
test.innerHTML += htm;
}
<ul id=test></ul>
答案 3 :(得分:0)
您可以直接阅读下面的示例: 案例1:
var text = { "Title": "asb", "Date": "2019", "Other": "not important" };
console.log(text.Date)
输出:2019
情况2:
转换并使用后
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
var obj = JSON.parse(s);