Сохранить объект в div и получить через Jquery - PullRequest
Новая
       2

Сохранить объект в div и получить через Jquery

0 голосов
/ 30 августа 2018

Мне нужно сохранить объект Javascript в div (или в производстве: много делений). Он действительно должен войти в атрибут data-object="" - я не хочу добавлять его позже через $('div').data('object').

Приведенный ниже код возвращает только "{" ... Мне кажется, что я пробовал каждую комбинацию stringify и parse и еще много чего.

Кто-нибудь знает, как получить мой объект? 

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = '<div data-object="' + JSON.stringify(object) + '"></div>';
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Заменить var html = '<div data-object="' + JSON.stringify(object) + '"></div>';
С var html = '<div data-object=' + JSON.stringify(object) + '></div>';
Нет необходимости добавлять дополнительные двойные кавычки 

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = '<div data-object=' + JSON.stringify(object) + '></div>';
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>
0 голосов
/ 30 августа 2018

Это потому, что JSON кодируется с использованием двойных кавычек ", и вы также заключаете его в двойные кавычки. Проблема в том, что он выдает: 

<div data-object="{" name":"one","type":"two"}"></div>

поэтому, когда вы читаете data-object, его значение равно "{".

Попробуйте заключить его в простые кавычки: 

var Module = {
  
  div: function() {
    
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var html = "<div data-object='" + JSON.stringify(object) + "'></div>";
    
    var div = $(html).appendTo('body');
      
    // This just returns "{" instead of my object
    console.log(div.data('object'));
    
  }
  
}


$(document).click(function() {
  Module.div();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Теперь вывод действителен: 

<div data-object='{"name":"one","type":"two"}' ></div>

Вы также можете установить атрибут программно с помощью jQuery: 

var Module = {
  div: function() {
    var object = {
      name: 'one',
      type: 'two'
    };
    
    var div = $("<div>")
               .attr("data-object", JSON.stringify(object))
               .appendTo('body');
      
    console.log(div.data('object'));
  }
}


$(document).click(function() {
  Module.div();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...