Блог

У меня есть 2 объекта:

 const subscription = {
 endpoint: "dfksjfklsjkld",
 keys: {
    pkey: "dfsfsdfsf",
    auth: "dfsdfsdfsd"
 }
};

const extra = {
  email: "dfsdfs",
  ip:"231342.342.342.34"
};
  

Я хотел бы поместить extra объект внутри подписки, чтобы он выглядел как:

 subsciption = {
 endpoint: ......
 keys: {...},
 extra: {
    email:....,
    ip: .....
 }
}
  

затем мне нужно отправить его как тело http-запроса:

 const response = await fetch(url, {
  method: "PUT", 
  mode: "no-cors",
  cache: "no-cache",
  credentials: "same-origin", 
  headers: {
    "Content-Type": "application/json",
  },
  redirect: "follow", 
  referrerPolicy: "no-referrer", 
  body: JSON.stringify(subscription), 
});
  

но я обнаружил, что независимо от того, что я делаю, я всегда теряю дополнительное свойство внутри подписки в процессе JSON.stringify() .

Я знаю причину: это потому, что свойства в дополнительном объекте не поддаются перечислению.

До сих пор я пытался:

1. используйте распространение:

 newSub = {
  ...subscription,
  ...extra
}
  

но содержимое newSub будет точно таким же с extra, все свойства подписки будут потеряны.

2. добавьте функцию toJSON в место, где я создаю дополнительный объект

 getExtra() : {    
.......
return {
      city: ipObject.city,
      country: ipObject.country_name,
      ip: ipObject.ip,
      lat: ipObject.latitude,
      lng: ipObject.longitude,
      org: ipObject.org,
      postal: ipObject.postal,
      region: ipObject.region,
      toJSON: () => {
        return this;
      }
    };    
}
  

никакого эффекта вообще.

Я прилагаю свой код здесь:

 async function updateSubscription() {
  try {
    const allowed = await askForPermission();
    if (!allowed) return;

    let subscription = await getSubscription();
    if (!subscription) return;

    // email
    const email = getEmail();
    if (!email || !validateEmail(email)) {
      alert("huh...so how are you going to receive notifications?");
      return;
    }

    // ip
    let ipObject = await getIP();
    let extra = {};
    if (ipObject) {
      ipObject.email = email;
      extra = ipObject;
    } else {
      extra.email = email;
    }

    console.log("extra: ", extra);

    // var newSubscription = Object.assign({}, subscription, {extra});
    // const newSubscription = {
    //   ...subscription,
    //   extra
    // };
    let newSubscription = subscription;
    newSubscription["extra"] = extra;
    console.log("new subscription1: ", newSubscription);
    console.log("new subscription1 stringified: ", JSON.stringify(newSubscription));

    const successful = await saveRegistration(newSubscription);

    if (successful) alert("you have successfully subscribed to the DC monitor");
    else alert("shit happens, try it later");
  } catch (err) {
    console.log("updateSubscription() failed: ", err);
  }
}

async function getSubscription() {
  console.log("try to get subscription");
  try {
    const swRegistration = await navigator.serviceWorker.ready;
    const pushSubscription = await swRegistration.pushManager.getSubscription();
    console.log("pushSubscription: ", pushSubscription);
    return pushSubscription;
  } catch (error) {
    console.log("getSubscription() error: ", error);
    return null;
  }
}
  

Обновить

1. Попробовал еще 1 подход:

 var newSubscription = Object.assign({}, subscription, {extra});
console.log("subscription: ", newSubscription);
console.log("subscription stringified: ", JSON.stringify(newSubscription));
  

вот скриншот вывода:

2. Также этот:

  const newSubscription = {
      ...subscription,
      extra
    };
    console.log("new subscription: ", newSubscription);
    console.log("new subscription stringified: ", JSON.stringify(newSubscription));
  

И вот скриншот вывода:

3. с использованием подхода со строковым индексом:

 let newSubscription = subscription;
    newSubscription["extra"] = extra;
    console.log("new subscription1: ", newSubscription);
    console.log("new subscription1 stringified: ", JSON.stringify(newSubscription));
  

Если изменение subscription в порядке, вы можете просто использовать:

 subscription['extra'] = extra;
  

Если вам нужен новый объект, вы можете использовать:

 const subscriptionObject = Object.assign({}, subscription, { extra });
  

РЕДАКТИРОВАТЬ: Поскольку вы работаете с Push API, свойства в PushSubscription не поддаются перечислению. Таким образом, subscription объект ведет себя не совсем как обычный объект, поэтому предлагаемые подходы не работают.

Однако вы можете сериализовать push-подписку с помощью PushSubscription.toJSON() , сначала сериализуя ее в «обычный» объект, а затем используя один из предложенных методов:

 subscriptionObject = Object.assign({}, subscription.toJSON(), { extra });
  

почему бы вам не использовать подобное простое присвоение свойства

 let subscription = {..}
const extra = {..}
  

затем

 subscription.extra = extra;
  

это должно сработать

Это немного халтурно, но, похоже, мы не знаем, как реализован PushSubscription объект, и он может работать не так, как вы ожидаете…

… однако, похоже, он правильно преобразуется в JSON, используя свой собственный метод (в соответствии с его API), поэтому вы можете попробовать что-то вроде этого:

 const newSub = { ...JSON.parse(subscription.toJSON()), extra };
  

Таким образом, преобразуем его в JSON (используя toJSON метод в Push API) и обратно в «обычный» объект javascript, а затем добавляем к нему extra свойство.

Вы пробовали

 newSub = {
  ...subscription, extra
}
  

в этом случае вам не нужно добавлять дополнительные данные.

 sub = JSON.stringify(newSub) should result in: "{"endpoint":"dfksjfklsjkld","keys":{"pkey":"dfsfsdfsf","auth":"dfsdfsdfsd"},"extra":{"email":"dfsdfs","ip":"231342.342.342.34"}}"