# Fetch text values from JSON and Display pop onclick text

I have below code which will fetch the text from json & onclick text , display pop up box in page.... Now i need to give options to change font-family, font color....

But Adding the code in the place of Content is going to be extremely difficult....

Is there any way so that i can improve code structure or write same code in another way ?

JSON :

{
"font" : "Arian",
"x" : 201,
"y" : 461,
"src" : "180ef82d1.otf",
"width" : 679,
"type" : "text",
"text" : "Good Food",
"name" : "edit_good_1"
}


script

const lightId = 'light' + layer.name
const lightIdString = '#' + lightId
\$('.container').append(
'<a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
'<div class="txtContainer" contenteditable="true" ' +
'style="' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'">' + layer.text + '</div></a>' +
'<div id="light' + layer.name + '" class="white_content" style="' +
'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" ' +
'onclick="closePopUp(' + lightId + ')">Close</a></div> <div>'
);
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'


Your code is very prone to errors, since you write all your html tags and content as a single string. Containing html and javascript in that way is extremely unsafe.

I would suggest creating your elements with document.createElement() and then using the JSON to set all the attributes. In the function you could just pass the id, and then find the correct json data for that id.

Concept code

function buildPopup(id) {
let layer = findJsonData(id)

let popup = document.createElement("div")
popup.id = layer.name
popup.style.left = layer.x + "px"
popup.style.top = layer.y + "px"
popup.style.fontFamily = layer.font
popup.innerHTML = layer.text

let btn = document.createElement("button")
popup.appendChild(btn)
closePopup(layer.name)
})

document.body.appendChild(popup)
}


Example for calling this function

 <a onclick="openPopUp('edit_good_1')">Open popup</a>


Example for getting the json by id

 // this function will find the right json data for this id
function findJsonData(id){
return {
"font" : "Arian",
"x" : 201,
"y" : 461,
"src" : "180ef82d1.otf",
"width" : 679,
"type" : "text",
"text" : "Good Food",
"name" : "edit_good_1"
}
}


I realise this is a bit conceptual but hopefully it will point you in the right direction!

JSFiddle

• Thanks a lot, is it possible for you to update your code in codepen i posted in question ? – vickey colors Apr 9 '19 at 11:45
• My intention was to give you some pointers on how to improve your code 😎, I have added a JSFiddle to show that it works! – Kokodoko Apr 9 '19 at 11:58
• Thanks again, in json i posted in question, there are multiple layers , some layers have images & some have text..... i will try your code in the codepen i posted in question..... – vickey colors Apr 9 '19 at 12:52
• Bear in mind that if your code becomes too complicated, you can probably simplify it at a higher level. For example, you could define your popups in template tags to save yourself a lot of createElement lines. developer.mozilla.org/en-US/docs/Web/HTML/Element/template – Kokodoko Apr 9 '19 at 15:09