Reading Json object using map()

Question

I have a json object like below {"Title":"asb","Date":"2019","Other":"not important"} What is the correct way to read this object and render in <ul><li>?

Note I tried this by assigning this to a state and iterate state using map(), but it is not working.

What do you mean, not working? Are you receiving an error? If so, what is error message? — James_F
– James_F, Commented Mar 27, 2019 at 4:14
Hi @brk then what is the best way to do this? one method I tried was, define a new array variable in render method , push the state to that new array and then reading the array object using map() method. — Kevin
– Kevin, Commented Mar 27, 2019 at 4:23

tam.dangc · Accepted Answer · 2019-03-27 04:21:45Z

2

map can use with Array only, not Object. Use Object.entries to convert the object to an array first

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>

answered Mar 27, 2019 at 4:21

tam.dangc

2,0621 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Bashford · Accepted Answer · 2019-03-27 04:23:23Z

2

It's an object, so map won't work. Iterate over Object.entries instead:

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>

answered Mar 27, 2019 at 4:23

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

ﾃﾞﾋﾞｯﾄ · Accepted Answer · 2019-03-27 04:19:59Z

1

For object , you can use for loop , map is better use for array type

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>

answered Mar 27, 2019 at 4:19

ﾃﾞﾋﾞｯﾄ

1293 bronze badges

Comments

RonyLoud · Accepted Answer · 2019-03-27 04:30:59Z

0

You can directly read see bellow example: case 1 :

var text  = { "Title": "asb", "Date": "2019", "Other": "not important" };
console.log(text.Date)

output :2019

case 2:

after convert and used

var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

edited Mar 27, 2019 at 4:30

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

answered Mar 27, 2019 at 4:26

Paresh Parmar

114 bronze badges

Collectives™ on Stack Overflow

Reading Json object using map()

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related