Question posted in
You can find the official documentation here.

Jquery ajax – Turn JSON objects with multiple properties into html-elements

I’d like to construct html-elements from JSON-objects with multiple properties. My JSON-file looks like this:

[
  {
    "shape1": {
      "fill": "red",
      "stroke": "black",
      "attr": {
        "stroke-width": 5,
        "color": "#000"
      }
    }
  },

  {
    "shape2": {
      "fill": "blue",
      "stroke": "black",
      "attr": {
        "stroke-width": 3,
        "color": "#d19930"
      }
    }
  },

  {
    "shape3": {
      "fill": "green",
      "stroke": "black",
      "attr": {
        "stroke-width": 7,
        "color": "#ffeb00"
      }
    }
  }
]

I’d like to be able to turn each of these into an element, such as this:

<div data-fill:"green" data-stroke="black" data-stroke-width="5" data-color="#000"></div>

I’m stuck trying to get access to the properties of the objects. I’m fetching the objects like so:

$.getJSON( "/assets/svg-data/svg-forms1.json", function( data ) {
  $.each(data, function(key, value) {
    // What to do now?
  })
});

When console log the objects, I can see that they have been fetched, but how do I now access the contents of the objects and use them?

Tags:

2

Answers


  1. 0

    Since the objects have different keys, and you’re not interested in the key, you can use Object.values(value)[0] to get the contained object that has the properties you want.

    $.getJSON( "/assets/svg-data/svg-forms1.json", function( data ) {
  $.each(data, function(key, value) {
    var obj = Object.values(value)[0];
    var div = $("<div>", {
        data: {
            fill: obj.fill,
            stroke: obj.stroke,
            "stroke-width": obj.attr["stroke-width"],
            color: obj.attr.color
        }
    };
    $("#container").append(div);
  })
});
    Login or Signup to reply.
  2. 0

    Due to the complex nature of your data, you may need to iterate more than once. Here is a basic example.

    var shapes = [{
    "shape1": {
      "fill": "red",
      "stroke": "black",
      "attr": {
        "stroke-width": 5,
        "color": "#000"
      }
    }
  },
  {
    "shape2": {
      "fill": "blue",
      "stroke": "black",
      "attr": {
        "stroke-width": 3,
        "color": "#d19930"
      }
    }
  },
  {
    "shape3": {
      "fill": "green",
      "stroke": "black",
      "attr": {
        "stroke-width": 7,
        "color": "#ffeb00"
      }
    }
  }
];

$(function() {
  function makeShape(a) {
    var d = $("<div>");
    $.each(a, function(key, val) {
      d.attr({
        "data-fill": val.fill,
        "data-stroke": val.stroke,
        "data-stroke-width": val.attr['stroke-width'],
        "data-color": val.attr.color
      });
    });
    return d;
  }

  $.each(shapes, function(i, v) {
    var s = makeShape(v);
    s.appendTo($(".shapes"));
  });
});
    .shapes {
  background: #ccc;
}

.shapes div {
  width: 100px;
  height: 100px;
  background: white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shapes"></div>

    As you can see, we iterate the Array, this gives us a number of Objects. Each of these Objects contains more Objects. Example:

    shapes[0].shapes1.fill

    This would have a value of “red”.

    If you can adjust the Data being sent back, I would advise a different structure. Like so:

    [
  {
    "id": "shape1",
    "fill": "red",
    "stroke": "black",
    "attr": {
      "stroke-width": 5,
      "color": "#000"
    }
  },
  {
    "id": "shape2",
    "fill": "blue",
    "stroke": "black",
    "attr": {
      "stroke-width": 3,
      "color": "#d19930"
    }
  },
  {
    "id": "shape3",
    "fill": "green",
    "stroke": "black",
    "attr": {
      "stroke-width": 7,
      "color": "#ffeb00"
    }
  }
]

    This will make iterating the data a lot easier.

    shapes[0].fill

    Now you just have to iterate the Array alone.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search