How to add json value in P tag in Javascript

user_6474292 0
Viewed 2861

Onclick of some tab I am creating para tag and on that I want to add some text. How to add those value dynamically.

Here is what I am trying.

Onclick of tab I am calling this method. 

SomeMethod = function(){
    var para = document.createElement("P");
       para.setAttribute("id", "myUL");


    function getData(callback) {
        debugger;
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', "../resource/para.json", true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }

    getData(function(data) {
        var jsonc = JSON.parse(data);
        debugger;
   document.getElementById('myUL').innerHTML = jsonc[0].VALUE;
    });
}

My JSON data is

[{
    "ID" : 0,
    "VALUE" : "My 10000 Character text."

    }]
html jquery javascript
5 Answers

You can define a second parameter at getData function, pass para as second parameter, set .textContent of para to result of JSON.stringify() with jsonc passed as parameter or jsonc[0].VALUE, pass para to .appendChild() to append the element to the document

JavaScript

para.className = "json";


// pass `para` to `getData()` call
callback(httpRequest.responseText, para);


// `element`: `para` passed at `callback`
getData(function(data, element) {
    var jsonc = JSON.parse(data);
    element.textContent = JSON.stringify(jsonc, null, 4); // or `jsonc[0].VALUE`
    document.body.appendChild(element);
    debugger;
});

CSS

p.json {
  white-space: pre;
}
user_28015590

Once you have your element, you can use innerHTML to put stuff inside of it. So supposing you already parsed your json and the data you want is inside the jsonc variable you can do

para.innerHTML = jsonc[0].VALUE;
user_1332030

To add dynamic html to dynamically created element (i.e p tag) try this

//Jquery
$("#yourtabid").append("<p></p>")
$("#yourtabid").find('p').append(jsonc[0].value);
user_38409290

You can follow below steps to add the json value to your para element here :

  • Create a "p" Element
  • add the innerHTML for the element
  • Add the element to your tab

If you are adding the innerHTML later, append the child first and then add the innerHTML.

var para = document.createElement("p");
para.innerHTML = "TEST";

// I'm guessing you have some Element with id "tab"
document.getElementById("tab").appendChild(para);
<div id="tab"></div>

user_39504220

You can use setAttribute() for adding values, I have tried and it is possible save json data as string but I don't prefer save as string directly hence you can add as Base64 encoded.

var Base64={_keyStr:"ABCDEFGHIJKL....................
var jsonData = [{
    "ID" : 0,
    "VALUE" : "My 10000 Character text."

}];
console.log(jsonData);

jsonDataStr = JSON.stringify(jsonData);
console.log(jsonDataStr);


var para = document.createElement("P");
document.body.appendChild(para);
para.setAttribute('data-custom',Base64.encode(jsonDataStr));
//para.setAttribute('data-custom',jsonDataStr);

var dataFromAtt = para.getAttribute('data-custom');
console.log(dataFromAtt);

Base64 Cross-Browser Method (compressed) you can find Base64 algorithm.

user_86832850
Related