About JSON Array Storage Using for Statements

We've created an array to get d3.js to read using the for statement.
Originally

 var nodes=[{label: "Russian plane shot down 2 people killed, countermeasures against Turkey NHK News",
              {label: "Young digital native generation cannot distinguish between Google search results and advertising - GIGAZINE",
              {label: "30,000 yen to be paid to low-income pensioners…10 million people (Yomiuri Shimbun)-Yahoo! News",
              {label: "Working with JR West to develop technology to prevent train transportation problems caused by turtles - News Announcement"}];

{label:"○○○"}
as shown in I'd like to do something like that, but

<!DOCTYPE html>
<html lang="ja">
<style>
US>svg{
    border —solid1px;
}
</style>
<head>
  <metacharset="utf-8">
  <title>D3.js (Force Layout) Practice</title>
</head>
<body>
  <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

  <script>
  varw = 800;
  varh = 800;

  var nodes = [ ];
  var links = [ ];


  function for_each(array, func) {Array.prototype.forEach.call(array, func);}

  function get_html(callback){
  	varhatena_hotentry_url="http://b.hatena.ne.jp/hotentry";
  	hatena_hotentry_url="http://allow-any-origin.appspot.com/"
  		+ encodeURIC component(hatena_hotentry_url);

  	/*// var hatena_hotentry_url="./hatena_hotentry.html"
  */
  	var req = new XMLHttpRequest();
  	req.open("GET", hatena_hotentry_url);
  	req.onreadystatechange=function(){
  		if(req.readyState===4&req.status===200){
  			callback(req.responseText);
  			req = undefined;
  		}
  	};
  	req.send(null);
  }

  function html_to_relationship(html){
  	var doc = new DOMParser().parseFromString(html, "text/html");
  	error_tags=doc.getElementsByTagName("parserror");
  	if(error_tags.length){
  		console.log("error:", error_tags);
  		return [[["Parse error", "Maybe HTML is broken"]];
  	}

  	var relationship=[]; /* // [[["name", ...], ...]
  */ variable_elms=doc.querySelectorAll(
  			"[data-track-section='default'].entry-contents");
  	for_each(entry_elms, function(entry_elm){
  		variable_link_elm=entry_elm.querySelector(".entry-link");
  		if(!entry_link_elm) {return;}

  		var name_array=[];
  		relationship.push(name_array);
  		name_array.push(entry_link_elm.title);

  		variable_meta_elm=entry_elm.nextElementSibling;
  		if(!entry_meta_elm) {return;}
  		for_each(entry_meta_elm.querySelectorAll("a.tag"), function(tag_elm){
  			name_array.push(tag_elm.textContent);
  		});
  	});

  	return relationship;

  	}



  function relationship_view(relationship){
  	/* document.getElementById("view").textContent
  	       	= JSON.stringify (relationship, undefined, 2);
  */




  	for (vari=0;i<relationship.length;i++){
  		if(i+1<relationship.length){
  			var num="{source:"+i+", target:"+(i+1)+"}";
  		} else {
  			var num="{source:"+i+", target:"+0+"}";
  		}
  		var list = relationship[i][0];
  		var list2 = "label:"+list+"}";
  			nodes.push(list2);
  			 links.push(num);
  	}

  		console.log(nodes)
  		console.log(links)


  		var force = d3.layout.force()
          .nodes (nodes)
          .links (links)
          .size([w,h])
          .linkStrength (0.1)
          .friction (0.9)
          .distance (200)
          .charge (-30)
          .gravity (0.1)
          .theta(0.8)
          .alpha(0.1)
          .start();

  		/* console.log(nodes)*/

  		varsvg=d3.select("body").append("svg").attr({width:w,height:h});

  		varlink=svg.selectAll("line")
          .data(links)
          .enter()
          .append("line")
          .style({stroke:"#ccc",
                  "stroke-width":1});


  		var node = svg.selectAll("circle")
  						.data(nodes)
  						.enter()
  						.append ("circle")
  						.attr({r:20,
  								opacity: 0.5})
  						.style({fill:"red")
  						.call(force.drag);


  		var label = svg.selectAll('text')
  				.data(nodes)
  				.enter()
  				.append('text')
  				.attr({"text-anchor": "middle",
  							"fill": "black"})
  				.style({"font-size":11})
  				.text(function(d){return nodes.label;});


  		 force.on("tick", function(){
  		      link.attr({x1:function(d){returnd.source.x;},
  		                 y1: function(d) {return d.source.y;},
  		                 x2 —function(d) {returnd.target.x;},
  		                 y2 —function(d) {return d.target.y;});
  		      node.attr({cx:function(d){return d.x;},
  		                 cy:function(d) {return d.y;});
  		      label.attr({x:function(d){returnd.x;},
  		    	  		  y —function(d) {return d.y});

  })
  }

  get_html(function(html){relationship_view(html_to_relationship(html)));});


  </script>
</body>
</html>

If you use the for statements from the above program to be placed in an array, the " will be outside the label such as ["label:○○○}"].
How do we describe this in order to make it the way it should be?
Thank you for your help.

javascript html json array

2022-09-30 21:11

1 Answers

The associative array is passed as a string.

for(vari=0;i<relationship.length;i++){
    if(i+1<relationship.length){
        var num = {source:i, target:(i+1)};
    } else {
        var num = {source:i, target:0};
    }
    var list = relationship[i][0];
    var list2 = {label:list};
        nodes.push(list2);
         links.push(num);
}

2022-09-30 21:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656