JSON data to customize CSS (JSON data from external JSON file) *updated issue (how to make array from JSON data)

Question

I'm having difficulty in parsing JSON data to JavaScript. I wanted to be able to customize the CSS feature by just using JSON. As an example, I wanted to build just a basic button. I created CSS style and linked it into HTML. However, I do not know such a way to make sure when Javascript read the JSON data, it will provide a right answer. As CSS involves with numerical value (etc width:50%), it makes me harder to customize.

I wanted to change the size of button, background-color, padding as well as the text in the button.

Can anyone help me on this. Thank you I used this code to parse Json into html

var info=JSON.parse(request.responseText);

------JSON file------

  {
      "button": {
        "width" : "100%",
        "backgroundColor": "#4CAF50",
        "border": "none",
        "color": "red",
        "padding": "15px 32px",
        "textAlign": "center",
        "textDecoration": "none",
        "display": "inline-block",
        "fontSize": "16px",
        "margin": "4px 2px",
        "cursor": "pointer"
      }
    }

JS file
window.onload = loadJSON;
function loadJSON()
{
 var request;
   if (window.XMLHttpRequest){
      request=new XMLHttpRequest();
   } else {
      request =new ActiveXObject("Microsoft.XMLHTTP");
      }

     request.onreadystatechange = function()
        {
         if ((request.status ===200) &&
            (request.readyState ===4))
            {

             var info=JSON.parse(request.responseText);

             if(info!= null)
                {
                  Object.keys(info).forEach(function(k) {
                    $('<' + k + ' />', info[k].attr).css(info[k].css).appendTo('#container');
                  });

                }
                else {alert("error")};
            }
        }

Here is the latest code. I would like to know is it possible if I wanted to customize more than one buttons? what should be the code as I can't solve it.

For the parsing problem, just read the docs, the rest of the question ... I've no clue of what you want. Can you elaborate the question? — Teemu
– Teemu, Commented Jul 21, 2017 at 8:57
you want to read the JSON from the object and have javascript change the style properties of the button accordingly? Is that right? The question really is not very clear I'm afraid. You mention some existing CSS, and then some JSON contains some CSS-like information, it's not clear what the link between them is, and not clear what you think your issue with things like 50% is either. Also, have you tried anything? Do you know how to use Javascript to set an element's style? Do you know how to read properties from a JSON/JavaScript object? It's not clear what you want or what you are stuck with. — ADyson
– ADyson, Commented Jul 21, 2017 at 8:59
yes, i wanted to read the JSON from the object and have javascript change the style properties of the button accordingly. I know how to parse the JSON data to JavaScript. I am able to customize the button icon if just by using CSS, HTML and JavaScript. I wanted to try something new, to extract the data from JSON file and allow the programme to customize the existing feature of button. However, i am only able to change the text inside the button, example 'click me' but unable to change the color, size of button and etc. — Qils
– Qils, Commented Jul 21, 2017 at 9:05
can you show the code you have got so far then please? Please edit the question to include it. — ADyson
– ADyson, Commented Jul 21, 2017 at 9:10
Updated! Please can you have a look and do you know how do I customize more than one buttons? what should i include in the JS code? — Qils
– Qils, Commented Jul 24, 2017 at 4:27

Rory McCrossan · Accepted Answer · 2017-07-21 09:15:10Z

1

The structure of your object closely matches the CSS properties jQuery would expect when building a new element. As such you can just apply the object to the jQuery object you use to create the element.

To specify the type of element you can retrieve the object's property using Object.keys, and then loop over them.

If you want to set the text of the element you would need to amend your data structure to supply CSS properties and HTML attributes separately, so they can be applied via the relevant methods, something like this:

var obj = {
  button: {
    css: {
      width: "100%",
      backgroundColor: "#4CAF50",
      border: "none",
      color: "red",
      padding: "15px 32px",
      textAlign: "center",
      textDecoration: "none",
      display: "inline-block",
      fontSize: "16px",
      margin: "4px 2px",
      cursor: "pointer"
    },
    attr: {
      text: 'Foo'
    } 
  },
  a: {
    css: {},
    attr: {
      href: 'http://stackoverflow.com',
      text: 'Visit StackOverflow.com'
    }
  }
}

Object.keys(obj).forEach(function(k) {
  $('<' + k + ' />', obj[k].attr).css(obj[k].css).appendTo('#container');  
});

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

One thing to note is that the order of properties in an object is not guaranteed, so if you need to rely on the ordering I'd suggest you change the data structure from an object to an array of objects.

edited Jul 21, 2017 at 9:15

answered Jul 21, 2017 at 9:02

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Qils Over a year ago

thank your for the help! it helps a lot. However, I am parsing external JSON file into Javascript, will the method be the same?

Rory McCrossan Over a year ago

Not quite - you just need to remove the second argument given to the jQuery object, and change obj[k].css to just obj[k]. Also, if you have no control over the JSON being returned then it will be much more difficult to set the text of the elements you create

Qils Over a year ago

thank you for the helped. However, do you mind explain to me what does this code means? I dont actually get it the term 'k' that you used. Plus, there's no sign of the term 'button' you used in the coding. I'm curious on how despite no 'button' syntax was used, yet the the code produce 'button'. Object.keys(obj).forEach(function(k) { $('<' + k + ' />', obj[k].attr).css(obj[k].css).appendTo('#container'); });

Rory McCrossan Over a year ago

The k variable holds the reference to the current key of the object being iterated over. This means in the first iteration it will hold the value button. Therefore the jQuery object is being used to create a new element: $('<button />'). It then has the relevant attributes and CSS added to the new element based on the key k from the object. The same occurs on the second iteration, but the k is now referencing the a property of the object.

Rory McCrossan Over a year ago

I have also noted that you have completely changed the question. I'd suggest you revert this question to its previous state and start a new question about retrieving the data from a remote source.

Shiladitya · Accepted Answer · 2017-07-21 10:58:33Z

0

Here you go with one more solution https://jsfiddle.net/sopv9652/3/

var data = {
  "button": {
    "width" : "100%",
    "backgroundColor": "#4CAF50",
    "border": "none",
    "color": "red",
    "padding": "15px 32px",
    "textAlign": "center",
    "textDecoration": "none",
    "display": "inline-block",
    "fontSize": "16px",
    "margin": "4px 2px",
    "cursor": "pointer"
  }
}

var tags = Object.keys(data);

$.each(tags, function(i){
	$('body').append($('<' + tags[i] + '>'));
  $(tags[i]).css(data[tags[i]]);
});

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

edited Jul 21, 2017 at 10:58

answered Jul 21, 2017 at 9:05

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

1 Comment

Rory McCrossan Over a year ago

Just FYI the OP wants to build the elements from the JSON, not amend existing ones. Also, there's no need for the second loop.

Collectives™ on Stack Overflow

JSON data to customize CSS (JSON data from external JSON file) *updated issue (how to make array from JSON data)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related