Creating a new string by combining elements from an array using JavaScript

Question

Creating a new string by combining elements from an array using JavaScript

I need help creating a dot file from a string array.

edges =[["Source1" ,"interfaceA" , "high" , "Sink1" , "interfaceB" , "high"], 
        ["Source2" ,"interfaceC" , "high" , "Sink2" , "interfaceD" , "low"]]

This is how I want the data in my dot file to appear :

digraph mydot {
    "Source1" -> "Sink1"
    [
       label=<<font color="green">interfaceA</font>--&gt;<font color="green">interfaceB</font>>
    ];
    "Source2" -> "Sink2"
    [
       label=<<font color="green">interfaceC</font>--&gt;<font color="red">interfaceD</font>>
    ];
}

I have tried using the code below, but it's not giving me the expected output:

let mydot ='digraph mydot {  ';
     mydot += edges.map(edge => {
       let sourceInterfaceColor = "red";
       let sinkInterfaceColor = "red";
    if (edge[2]=="high")
      sourceInterfaceColor ="green";
    if(edge[5]=="high")
      sinkInterfaceColor ="green";

    mydot +=`\
                    ${edge[0]} -> ${edge[3]} \
        [                                    \
           label=<<font color= \"${sourceInterfaceColor}\">\"${edge[1]}\"</font>--&gt;<font color=\"${sinkInterfaceColor}\">${edge[4]}</font>> \
        ];`
        .stripMargin});
    mydot +='}';

How can I modify mydot to correctly generate the digraph data?

javascript arrays string dot

Answer 1

Answer №1

Here is a simple method to achieve the desired result you are looking for. Template literals, found here, provide support for multiline features.

const connections =[["Start" ,"pointA" , "high" , "End1" , "connectionB" , "high"], ["Start2" ,"pointC" , "high" , "End2" , "connectionD" , "low"]]

const connectionToString = conn => `
    "${conn[0]}" -> "${conn[3]}"
    [
       label=<<font color="green">${conn[1]}</font>--&gt;<font color="green">${conn[4]}</font>>
    ]
`.trimEnd()

const diagramToString = connections => `digraph mygraph {${connections.map(connectionToString).join('')}\n}`

console.log(diagramToString(connections))

Answer 2

Here is a simple method to achieve the desired result you are looking for. Template literals, found here, provide support for multiline features.

const connections =[["Start" ,"pointA" , "high" , "End1" , "connectionB" , "high"], ["Start2" ,"pointC" , "high" , "End2" , "connectionD" , "low"]]

const connectionToString = conn => `
    "${conn[0]}" -> "${conn[3]}"
    [
       label=<<font color="green">${conn[1]}</font>--&gt;<font color="green">${conn[4]}</font>>
    ]
`.trimEnd()

const diagramToString = connections => `digraph mygraph {${connections.map(connectionToString).join('')}\n}`

console.log(diagramToString(connections))

Creating a new string by combining elements from an array using JavaScript

Answer №1

Similar questions

JavaScript: What is the best way to increase the size of an array by adding new elements

Completed processing graphical event layer

Tips on creating a literal type that is determined by a specific value within an object

Unable to execute Protractor using Node.js command line

Moving the layout container towards the left: a quick guide

Using Javascript's regular expressions to add double quotes around JSON values that are not already enclosed in quotes

Retrieve an array containing a single item from a JSON using ObjectMapper

Press a button to activate a function on a dynamically created table using Ajax

Shadow effect on the dropdown body with accordion style

Issues with Ajax Requests

Mixing various templates into a single outlet in ember.js

Having issues with UTF8 encoding when utilizing AJAX to send the complete HTML source in JavaScript

How can you determine which of three intersecting three-dimensional objects should be displayed?

Can you please explain the purpose of this code block and whether it is necessary for me to use in my project

Arranging and moving list elements without the use of jQuery UI (or any jQuery libraries at all?)

allocating a pointer to an array within a class

Finding a specific value within a table: a step-by-step guide

Find all the members belonging to a specific role in a Discord guild using discord.js client and store them in an array

What makes this CSS causing render blocking?

The Directive cannot be refreshed as a result of the ongoing "$digest already in progress" error