Question

使用 map() 读取 Json 对象

2019-03-27

87

javascript json reactjs object

我有一个如下所示的 json 对象 {"Title":"asb","Date":"2019","Other":"not important"> 读取此对象并在 <ul><li> 中呈现的正确方法是什么？

注意我尝试将其分配给一个状态并使用 map() 迭代状态，但它不起作用。

Answer 1

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>

Answer 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>

Answer 3

对于对象，可以使用 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>