Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Script – Reading CSV file into SVG script

New to Javascript, I’m trying to adapt a script used to display SVG images, currently the script reads the values form within the script, I want to adapt this to read the values from a CSV, the issue I have is the script doesn’t seem to interpret the value correctly, the column I’m having issues with is "nodeStyle" ,if I change the column variable from nodeStyle to {width:100,height:100} it works but it wont read it from CSV, any help would be great

//Data.CSV format
//id, x, y, href, nodeStyleW,nodeStyle,properties,label_text
//NODE22,650,50,/icon.png,{width:100,height:100},,NODE22

    fetch('/data.csv')
   .then(response => response.text())
   .then(data => {

     const rows = data.split('n').slice(1); // Skip header row
      rows.forEach(row => {
     const [id, x, y, href, nodeStyle, properties, label_text] = row.split(/,(?![^{]*})/);


     net.addNode(id,parseInt(x),parseInt(y),href,nodeStyle,properties,label_text);

       });
      });
    
     // Mode added via script 
    net.addNode("NODE2",600,50,"/images/icon.png",{width:100,height:100},"","","NODE2");

I have tried adding the value directly and this works

net.addNode(id,parseInt(x),parseInt(y),href,nodeStyle,properties,label_text);
net.addNode(id,parseInt(x),parseInt(y),href,{width:100,height:100},properties,label_text);

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Resolved - Changing the code fixed the issue , I just needed to amended the CSV to {"width":100,"height":100}


  2. 0

    It seems like you’re encountering issues parsing the nodeStyle from your CSV file correctly. The problem likely lies in how you’re representing the nodeStyle in your CSV and how you’re interpreting it in your JavaScript code.

    In your CSV file, you seem to be attempting to represent nodeStyle as an object, but CSV doesn’t inherently support nested structures like JavaScript objects. Therefore, you need to find an appropriate representation for nodeStyle that you can easily parse in your JavaScript code.

    One approach could be to represent nodeStyle as a string in a format that you can later parse in your JavaScript code. For example, instead of writing

    {width:100,height:100}

    directly in the CSV, you could represent it as a JSON string like

    "{"width":100,"height":100}"

    Here’s how you can modify your code to achieve this:

    fetch('/data.csv')
  .then(response => response.text())
  .then(data => {
    const rows = data.split('n').slice(1); // Skip header row
    rows.forEach(row => {
      const [id, x, y, href, nodeStyleStr, properties, label_text] = row.split(/,(?![^{]*})/);
      const nodeStyle = JSON.parse(nodeStyleStr); // Parse the nodeStyle string to an object

      net.addNode(id, parseInt(x), parseInt(y), href, nodeStyle, properties, label_text);
    });
  });

    With this modification, your CSV would look like:

    id, x, y, href, nodeStyleW, nodeStyle, properties, label_text
NODE22,650,50,/icon.png,"{""width"":100,""height"":100}",,NODE22

    This way, you’re representing nodeStyle as a JSON string in the CSV, and then parsing it back to an object in your JavaScript code before passing it to net.addNode(). This should resolve your issue with interpreting the nodeStyle correctly from the CSV.

    Good luck!

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

Back To Top
Search