Установка строки JSON Ajax в переменные с помощью Jquery, затем добавление ‹li›

У меня есть сценарий Ajax, который в настоящее время получает строку данных JSON и добавляет данные к <li> на странице, например:

введите здесь описание изображения

Это сценарий Jquery, который я использую для этого:

jQuery(document).ready(function($) {
  $('form.quform').Quform({
  successStart: function (response) {
  var li = $("<li>").text(JSON.stringify(response));
  $("#response").append(li)

Но я хочу назначить переменные для результатов 5 полей и отобразить их в промежутках, чтобы они выглядели примерно так после того, как я добавлю к ним css:

введите здесь описание изображения

Я пробовал разные вещи, чтобы заставить это работать, и прочитал много статей о стеке, один Статья о стеке говорит присвоить строке переменную, подобную этой var data = JSON.stringify(myObject, replacer);, но это не сработало. Это последнее, что я пробовал, но я знаю, что это неправильно. Любая помощь будет оценена, спасибо.

jQuery(document).ready(function($) {
  $('form.quform').Quform({
    successStart: function (response) {
      var data = JSON.stringify(myObject, replacer);
      var content = "balance: " + data.balance + " account_number:" + data.account_number;
      var li = $("<li><span>").text(content);
      $("#response").parent().append(li);

Также это строка JSON, которую я получаю на странице:

{"type":"success","message":"Your message has been sent, thank you.","record":{"id":108,"bank_name":"Jane Doe","balance":"200","account_number":"8765432187654321","customer_id":"250","monthly":"50"}}

javascript json jquery ajax
person Michael Falciglia    schedule 19.01.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Помещать туда var data = JSON.stringify(myObject, replacer); не имеет смысла, потому что myObject и replacer не определены. Не просто копируйте и вставляйте код. Другие ответы просто предоставили общую подпись JSON.stringify. Вы уже знаете, как его использовать, потому что использовали его в своем первом фрагменте кода.

В любом случае, JSON.stringify преобразует существующий объект/массив в строку, содержащую JSON, что также означает, что response уже является объектом. Так что все, что вам нужно сделать, это получить доступ к его свойствам. В твоем случае,

var data = response.record;

установит data правильное значение.

Дополнительная информация: Доступ/обработка (вложенных) объектов, массивов или JSON

person Felix Kling    schedule 19.01.2014
comment
Спасибо за вашу помощь.... это имеет смысл, тогда как мне отделить имена полей от значений при установке переменной. Я не хочу показывать это так bank_name":"Jane Doe, я хочу показать только jane doe - person Michael Falciglia; 19.01.2014
comment
Вам не нужно. Если var x = {foo: "bar"}; является объектом, то x.foo возвращает "bar". Следовательно, data.bank_name возвращает "Jane Doe". Эта статья MDN достаточно хорошо объясняет, как работают объекты. - person Felix Kling; 19.01.2014
comment
Я до сих пор не понимаю, я должен изменить это также var li = $("<li>").text(JSON.stringify(response)); или просто добавить это var data = response.record; на следующей строке. Извините, у меня просто нет опыта работы с JSON. - person Michael Falciglia; 19.01.2014
comment
Во втором фрагменте кода замените var data = JSON.stringify(myObject, replacer); на var data = response.record;. Вы также должны изменить var li = $("<li><span>").text(content); на var li = $("<li>").text(content);. $("<li><span>") не работает. - person Felix Kling; 20.01.2014
comment
о, не используйте JSON, о котором вы говорите - person Michael Falciglia; 20.01.2014
comment
Да в том смысле, в каком вы об этом думаете, нет в общем случае. JSON — это независимый от языка формат обмена текстовыми данными (например, XML, CSV или YAML). Сервер отправляет JSON в качестве ответа клиенту, а затем его можно разобрать в объекты/массивы JavaScript. В этом случае jQuery выполняет синтаксический анализ за вас, поэтому response уже является объектом JavaScript, а не строкой, содержащей JSON. JSON.stringify преобразует объекты/массивы в JSON. - person Felix Kling; 20.01.2014
comment
вчера кто-то предложил мне использовать JSON после того, как я опубликовал аналогичный вопрос, и поэтому я попробовал его. Это поток, о котором я говорю stackoverflow.com/questions/21209668/ - person Michael Falciglia; 20.01.2014
comment
FWIWI, JSON не должен ничего делать с jQuery, и на данный момент не имеет значения, используете ли вы JSON или нет. Важно только то, что response является объектом. Похоже, вы уже были на правильном пути со своим кодом в другом вопросе. - person Felix Kling; 20.01.2014
comment
Я играл с ним, используя этот ` jQuery (document). баланс: + данные.запись.баланс + номер_счета: + данные.запись.номер_счета; var li = $(‹li›).text(content); $(.myData).parent().append(li);` - person Michael Falciglia; 20.01.2014
comment
Но не работает, форма все равно отправляет данные, но ничего не делает. анимация загрузки продолжает крутиться, значит в скрипте чего-то не хватает - person Michael Falciglia; 20.01.2014

arrow_upward
0
arrow_downward

Предполагая, что ваш ответ является ответом JSON, вам не нужно делать:

var data= JSON.stringify(myObject, replacer);

Кроме того, myObject и replacer кажутся неопределенными. Кроме того, это выглядит как эта строка:

var content = "balance: " + data.balance + " account_number:" + data.account_number;

должно быть:

var content = "balance: " + data.record.balance + " account_number:" + data.record.account_number;

Если это не работает, попробуйте следующее:

var data = $.parseJSON(response);
var content = "balance: " + data.balance + " account_number:" + data.account_number;

Это фактически проанализирует переменную ответа для объекта, к которому вы затем сможете получить доступ через «data.record».

person Kukiwon    schedule 19.01.2014
comment
Я думал, что синтаксический анализ был противоположным. Если бы я хотел отправить строку обратно на сервер, я бы использовал ее для форматирования объекта. - person Michael Falciglia; 19.01.2014
comment
См. Документацию по parseJSON. Он принимает строку JSON и возвращает POJO (обычный старый объект Javascript). - person Kukiwon; 19.01.2014
comment
У меня был еще один вопрос... основываясь на вашем ответе, я мог бы просто оставить все как есть, а затем установить переменную для строки. Как бы это выглядело var data = $.text(JSON.stringify(response)); - person Michael Falciglia; 20.01.2014
comment
Это не имеет смысла для меня. Я предлагаю вам взглянуть на комментарий @Felix Kling. - person Kukiwon; 20.01.2014