Блог

Главная - Вопросы по программированию - Чтение объекта Json с помощью map()

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

#javascript #json #reactjs #object

#javascript #json #reactjs #объект

Вопрос:

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

Примечание Я пробовал это, присваивая это состоянию и повторяя состояние с помощью map() , но это не работает.

Комментарии:

1. Это зависит от того, как вы хотите отобразить свои данные

2. Что вы имеете в виду, не работает? Вы получаете сообщение об ошибке? Если да, то что это за сообщение об ошибке?

3. Не могли бы вы, пожалуйста, быть более конкретными?

4. Если это не массив объекта, то map не будет работать

5. Привет @brk тогда каков наилучший способ сделать это? один из методов, который я попробовал, заключался в том, чтобы определить новую переменную массива в методе render, передать состояние этому новому массиву, а затем прочитать объект массива с помощью метода map ().

Ответ №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>

Ответ №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>

Ответ №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>

Ответ №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);