Estoy tratando de usar datos JSON en Django para brindarle al usuario la opción de buscar y seleccionar. Puedo cargar y extender datos a html pero no estoy seguro de cómo usarlos en jQuery. Mi código funciona bien si vinculo mi jQuery a algún sitio web fuera de mi servidor. Quiero decir, si puedo vincularlo así:
$.getJSON("http://meme.computer/stack/data.json", function(data) {vistas.py:
from django.shortcuts import render from aceform.forms import RequestForm import json def index(request): form = RequestForm() data = open('data.json').read() jsonData = json.dumps(data) return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})base.html:
{% load staticfiles %} <!doctype html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { var data = JSON.parse("{{ jsonData }}"); console.log(data) autoComplete = []; for (var i = 0, len = data.length; i < len; i++) { autoComplete.push(data[i].iata + ", " + data[i].name); } console.log(data); $( "#id_from_airport" ).autocomplete({ source: autoComplete, minLength: 3 }); $( "#id_to_airport" ).autocomplete({ source: autoComplete, minLength: 3 }); }); </script> </head> <body> {% block content %} {{ form.as_p }} {% endblock content %} </body> </html>$.getJSON("{{jsonData}}", function(data) No tiene sentido. Está llamando a getJSON en JSON representado desde su vista. Ya tienes los datos en tu plantilla.
Dependiendo del motor de plantilla que esté utilizando, debería poder iterar sobre su {{jsonData}} .
En este punto aquí:
data = open('data.json').read()
los datos ya son de tipo cadena.
No necesita "convertir esto en json" porque ya está serializado (con suerte) como json.
Puede hacer esto para probárselo a sí mismo (y tal vez comprobar si hay errores en el camino):
def index(request): form = RequestForm() data = open('data.json').read() jsonData_loaded = json.loads(data) jsonData = json.dumps(jsonData_loaded) # I note here that you aren't closing the open file data. return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})Pero eso sería súper tonto.
Podría tener más sentido simplemente hacer:
def index(request): form = RequestForm() with opened as open('data.json'): data = json.load(opened) jsonData = json.dumps(data) return render(request, 'aceform/base.html', {'form': form, 'jsonData': jsonData})Quiero decir, probablemente también sea redundante cargar y volcar, pero a.) ¿cómo sabe que json en el disco es válido y b.) puede transferir caracteres de nueva línea u otra basura aleatoria.
(De todos modos, no leería de un disco así por este tipo de cosas)
La moraleja de la historia aquí es que ya tienes una cuerda. ¡Podrías pasarlo y esperar lo mejor en el lado FE!
Editar para FE:
Ah, y luego miré tu plantilla.
En realidad, no necesita toda la función $.getJSON porque ya tiene json.
Simplemente puede hacer var data = JSON.parse('{{jsonData|safe}}');
y luego ir a la ciudad con eso!
Puede usar una etiqueta segura para pasar datos json a js/jquery, al igual que {{ jsonData|safe }}
Veo que su jsonData ya es una cadena del formato de json.
Puedes probar esto en tu plantilla como
<script> $(function () { var data = {{ jsonData|safe }} console.log(data) autoComplete = []; for (var i = 0, len = data.length; i < len; i++) { autoComplete.push(data[i].iata + ", " + data[i].name); } console.log(data); $("#id_from_airport").autocomplete({ source: autoComplete, minLength: 3 }); $("#id_to_airport").autocomplete({ source: autoComplete, minLength: 3 }); }); </script>