html 5 attribute as array of object being treated as string

Question

I am trying to create a code snippet that fetches google map objects like location, marker text from database and add it to html data-attributes so I can use them in javascript easily

I am unable to make js understand the json as json , its rather being treated as string

	jQuery('.map_canvazz').each(function(i,elem) {
		latPos			=	jQuery(this).attr("data-lat");
		longPos			=	jQuery(this).attr("data-long");
		infoDisplay		=	jQuery(this).attr("data-info");
		var objAddresses=	jQuery(this).attr("data-params");
        
      if(typeof objAddresses != 'undefined'){
			console.log(typeof(objAddresses));
			console.log(objAddresses);
			//array of object is treated as string
            // unable to convert array of objects as json
            // todo :- loop through the object of array
		}
      
      })

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

<div class='map_canvazz' id='maper1'   data-params='[{"lat":"-36.758435","long":"144.273174","mapTxt":"<div class=\"mapArea\"><div class=\"lineOneMap\">Beyond Medical Education Victorian Office<\/div><div class=\"lineTwoMap\">37 Rowan Street<br>Bendigo VIC 3550, Australia<br>+61 35441 9300<\/div><\/div>"},{"lat":"1111","long":"222","mapTxt":"test"}]'></div>					</div>

Quentin · Accepted Answer · 2015-01-11 17:21:30Z

2

Attribute values can only be strings. If you want to convert a string of JSON into a JavaScript object then you should run it through JSON.parse().

answered Jan 11, 2015 at 17:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

June Over a year ago

I tried using JSON.parse() and I get following error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

A. Wolff · Accepted Answer · 2015-01-11 17:52:37Z

1

Use .data() jq method. It will parse it to array:

jQuery('.map_canvazz').each(function(i, elem) {
  var objAddresses = jQuery(this).data("params");
  for (var i = 0; i < objAddresses.length; i++) {
    var obj = objAddresses[i];
    console.log(obj.lat, obj.long, obj.mapTxt);
  }
})

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

<div class='map_canvazz' id='maper1' data-params='[{"lat":"-36.758435","long":"144.273174","mapTxt":"<div class=\"mapArea\"><div class=\"lineOneMap\">Beyond Medical Education Victorian Office<\/div><div class=\"lineTwoMap\">37 Rowan Street<br>Bendigo VIC 3550, Australia<br>+61 35441 9300<\/div><\/div>"},{"lat":"1111","long":"222","mapTxt":"test"}]'></div>
</div>

edited Jan 11, 2015 at 17:52

answered Jan 11, 2015 at 17:24

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Collectives™ on Stack Overflow

html 5 attribute as array of object being treated as string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related