将Python信息发送到JavaScript文件 - javascript

我是Python和JavaScript的新手，并且尝试使用cola.js。我的HTML表单将信息发送给Python，这将其转变为字典数组。

Class_Name(ndb.Model):
    class_title = ndb.JsonProperty()
def post(self):
    classname = self.request.get('classname') #user inputs 1 classname
    prereq = self.request.get('prereq') #user inputs 1 prereq
    new_dictionary = {}
    new_dictionary [classname] = prereq
    new_class = Class_Name(class_title = new_dictionary) #stores as a dictionary
    new_class.put()

    Class_data = Class_Name.query().fetch() #gets all instances of Class_Name

   *** code that goes in b/w sends back to input form if want to add more classes, else, goes to below code

        output = []
        for a in Class_data:
            jsonprop = a.class_title
            extracted_output = json.dumps(jsonprop)
            output.append(extracted_output)
        template_vars= {'Class_data': output}
        template = jinja2_environment.get_template('template/post.html')
        self.response.write(template.render(template_vars))

到目前为止，这是我的基本代码。我想使用cola.js将我的信息转换为图表，从而基本上将每个类及其先决条件映射出来。但是，cola.js格式是一个JavaScript文件，如下所示：

graph = {
  nodes: [
  {
    id: 'A'
  }, {
    id: 'B'
  }, {
    id: 'C'
  }
],

links: [
  {
    id: 1,
    source: 'A',
    target: 'B'
  }, {
    id: 2,
    source: 'B',
    target: 'C'
  }, {
    id: 3,
    source: 'C',
    target: 'A'
  }
]
};

有什么办法可以告诉JavaScript获取我的Python数组，并像这样将信息输入到JavaScript文件中？

graph = {
  nodes: [
  {
    id: 'Class1' **will put actual class name
  }, {
    id: 'Class2'
  }
],

links: [
  {
    id: 1,
    source: 'Class1',
    target: 'prereq'
  }, {
    id: 2,
    source: 'Class2',
    target: 'prereq'
  }
]
};

这是将我的Python信息转换为JavaScript格式的粗略代码。

nodes_array = []
nodes_dict = {}
links_array = []
links_dict = {}
graph_array = []

#loops through every element
for a in Class_data:
    jsonprop = a.class_title
    extracted_output = json.loads(jsonprop)

for c_class, prereq in extracted_output.iteritems():
    # for the links dictionary  
    counter_link = 1
    # creates {'id':'class1'}
    nodes_dict['id'] = c_class
    #creates [ {'id':'class1'},  {'id':'class2'}]
    nodes_array.append(nodes_dictionary)
    # creates {'id': 'counter', 'source': 'class1', 'target': 'prereq'}
    links_dictionary[id] = counter_link
    counter_link++
    links_dictionary[source] = c_class
    links_dictionary[target] = prereq
    # creates [{'id': 'counter', 'source': 'class1', 'target': 'prereq'}]
    links_array.append(links_dictionary)
    #creating the format --> 'nodes': [  {id: class1}, {id:class2},  {id:class3} ]"
    #creating the format --> 'links': [  {id: 1, source :class2, target :class3} ]"
    graph[nodes] = nodes_array
    graph[links] = links_array

参考方案

您的Python脚本可以使用the json module以JavaScript可以理解的格式将图形写入文件。

如果您使用Python执行此操作：

import json

graph = {
    'nodes': [ {'id': 'Class1'}, {'id': 'Class2'} ],
    'links': [
        { 'id': 1, 'source': 'Class1', 'target': 'prereq' },
        { 'id': 2, 'source': 'Class2', 'target': 'prereq' }
    ]
}

with open('graph.js', 'w') as out_file:
  out_file.write('var graph = %s;' % json.dumps(graph))

结果是一个名为graph.js的文件，其中包含以下内容：

var graph = {"links": [{"target": "prereq", "source": "Class1", "id": 1}, {"target": "prereq", "source": "Class2", "id": 2}], "nodes": [{"id": "Class1"}, {"id": "Class2"}]};

如果在加载自己的JavaScript文件之前加载graph.js，则可以引用变量graph来使用图形。

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

在JavaScript函数中转义引号 - javascript

我正在尝试将变量传递给javascript函数。根据用户的选择，它可以是文本或图像。这里已经讨论了类似的问题，但我无法解决。在php中，我这样编码：if ($choice == 1) { $img = '<img src = "../folder/'.$_SESSION["img"].'�…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

如何使用Javascript将字典列表解析为JSON格式？ - javascript

我正在尝试解析JSON格式的词典列表，以便可以使用它们的数据创建一组列表项，其中使用此数据生成文本和ID。我将以下内容传递到我的网页，并在投放之前将其存储在隐藏的div中： [{'text': 'org1', 'id': 'org1ID'}, {'text':…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …