Чтение объекта Json с помощью map ()

Question

У меня есть объект json, как показано ниже {"Title":"asb","Date":"2019","Other":"not important"} Как правильно читать этот объект и визуализировать в <ul><li>?

Примечание Я попытался сделать это, назначив егосостояние и итерация состояния, используя map(), но это не работает.

Answer 1

map можно использовать только с массивом, но не с объектом. Используйте 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

Для объекта, вы можете использовать для цикла, карта лучше использовать для типа массива

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>

Answer 4

Вы можете непосредственно прочитать, см. Ниже пример: дело 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);