How to place text of a div as a json string?

Question

I have a div which outputs as text a json format:

HTML

<div id="myMap"></div>

JS

$('#myMap').text(JSON.stringify(out[0], null, 2));

That gives me:

{ "name": "Leopardi", "children": [ { "name": "Vita", "children": [ { "name": "Ubriacone" } ] }, { "name": "Poesie", "children": [ { "name": "L'infinito" } ] } ] }

Now I need to set that as a variable to be able to read it and this is what I am doing but I get nothing at all:

var root =  $('#myMap').text();

I am trying to have the output like:

var root = {
 "name": "flare",
 "url": "http://google.com",
 "children": [
   {
     "name": "an...

Not sure how that is possible. What occurs if you define `root` first `var root = JSON.stringify(out[0], null, 2)`, then pass `root` to `.text(root)`? — guest271314, Mar 27 '17 at 18:53
@dandavis actually yes, you were right, i had the call in a function which i wasn't calling so the issue was somewhere else yet what you did was correct. Someone else answered the same tho :( — rob.m, Mar 27 '17 at 18:55
Just taking a guess but I bet this is timing issues. Try putting your javascript inside: setTimeout(function(){ $('#myMap').text(); }, 2000); — Woodsy, Mar 27 '17 at 18:56

vol7ron · Accepted Answer · 2017-03-27T20:29:56.500

If you're trying to create an object out of the JSON string, seek JSON.parse():

var out = [{
  "name": "Leopardi",
  "children": [{
    "name": "Vita",
    "children": [{
      "name": "Ubriacone"
    }]
  }, {
    "name": "Poesie",
    "children": [{
      "name": "L'infinito"
    }]
  }]
}];

$('#myMap').text(JSON.stringify(out[0], null, 2));

var root = JSON.parse( $('#myMap').text() ); // <-- JSON.parse

console.log('root.name:', root.name);        // <-- can treat 'root' as object

#myMap {
  border: 1px solid;
  padding: .5em;
  font-family: monospace;
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

MyMap:
<div id="myMap"></div>

How to place text of a div as a json string?

1 Answers1