Почему JSON.stringify теряет часть объекта?

Question

[Tyler Lowell]

Добрый день! У меня есть JavaScript объект

let form = {
  img: "...", // тут закодированная base64 строка
  name: "smth",
  desc: "smth"
}

При попытке превратить объект в строку для передачи, возникает проблема: на выходе получается такая строка:
{"name":"smth","desc":"smth"}
То бишь, куда-то затерялось base64 изображение.

Можно ли это как-то поправить?

Весь код

document.getElementById("back").addEventListener("click", function(e){
  move("search")
})

document.getElementById('ok').addEventListener('click', () => {
  let form = {};
  if(document.getElementById('load_img').files.length > 0) {
    var img = document.getElementById('load_img').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(img);
    reader.onload = function() {
      form.img = encodeURIComponent((reader.result).split(',')[1]);
      // form.img = encodeURIComponent(btoa('hahahahahahh'));
    }
  } else {
    form.img = '';
  }

  form.name = encodeURIComponent(document.getElementById('name').value);
  form.desc = encodeURIComponent(document.getElementById('desc').value);

  console.log(form);

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://host/api/?product.create=' + JSON.stringify(form));
  // xhr.send();

  console.log('Form: ' + form);
  console.log(JSON.stringify(form));

  xhr.onreadystatechange = () => {
    if(xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
      var data = JSON.parse(xhr.responseText);

      if(data.code == 1) {
        alert('Товар успешно создан');
        move('search');
      } else {
        alert('Ошибка! ' + data.text);
        move('search');
      }
    }
  }
});

Comments

[dollar]

Приведите полностью код, который мистически не работает (можно под спойлером, если слишком большой).

[Lynn «Кофеман»]

Не верю ©

[Tyler Lowell]

dollar, добавил

[Lynn «Кофеман»]

Ридер асинхронный, к моменту JSON.stringify у вас ещё нет img

Answer 1

[Tyler Lowell]

Решил проблему ;)
Проблема была в том, что ридер файла работает в асинхроне, как и сказал Алексей Тен .
Благодарю всех за помощь!

Корректный ответ

Поместил XHR отправку в отдельную функцию и вызываю только когда сработает "onload" у ридера файлов.

Листинг

let form = {};
document.getElementById('ok').addEventListener('click', () => {
  if(document.getElementById('load_img').files.length > 0) {
    var img = document.getElementById('load_img').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(img);
    reader.onload = function() {
      form.img = encodeURIComponent((reader.result).split(',')[1]);
      form.name = encodeURIComponent(document.getElementById('name').value);
      form.desc = encodeURIComponent(document.getElementById('desc').value);
      send();
    }
  } else {
    form.img = '';
    form.name = encodeURIComponent(document.getElementById('name').value);
    form.desc = encodeURIComponent(document.getElementById('desc').value);
    send();
  }

  console.log(form);
});

function send() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://host/api/?product.create=' + JSON.stringify(form));
  // xhr.send();

  console.log('Form: ' + form);
  console.log(JSON.stringify(form));

  xhr.onreadystatechange = () => {
    if(xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
      var data = JSON.parse(xhr.responseText);

      if(data.code == 1) {
        alert('Товар успешно создан');
        move('search');
      } else {
        alert('Ошибка! ' + data.text);
        move('search');
      }
    }
  }
}

Answer 2

[akhoronko]

form.img заполняется асинхронно в reader.onload, поэтому в момент вызова JSON.stringify его может не быть

Answer 3

[Eugene Chefranov]

При формировании base64 картинки у вас наверно есть перевод строк или типа того. По коду должно работать

Comments

[dollar]

Как перевод строки может сломать JSON.stringify?

var s = "qwe\nrty";
JSON.stringify(s);

[Eugene Chefranov]

dollar, имею ввиду типа такого

let form = {
  img: "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L
  1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7", // тут закодированная base64 строка
  name: "smth",
  desc: "smth"
}

[dollar]

Eugene Chefranov, тут синтаксическая ошибка.
Давайте так:

let form = {
  img: `data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L
  1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7`, // тут закодированная base64 строка
  name: "smth",
  desc: "smth"
}
JSON.stringify(form);

[Tyler Lowell]

dollar, зачем в

``

?

[dollar]

Tyler Lowell, потому что приведенный код даже не компилируется