Tengo una lista de atributos dentro de divs que quiero poner en un objeto:
<div class="d-none product-data"> <div class="product" product-name="English-One" translated-name="Translated-One"></div> <div class="product" product-name="English-Two" translated-name="Translated-Two"></div> </div>Así que recorrí .product-data .product y agregué cada atributo como este:
$('.product-data .product').each(function () { translatedProducts = { "product": { "en": $(this).attr('product-name'), "tr": $(this).attr('translated-name') } } });Sin embargo, cuando consola.log (productos traducidos) obtengo múltiplos, y solo agrega English-Two -
Object { product: {…} } product: Object { en: "English-Two", tr: "Translated-Two" } en: "English-Two" tr: "Translated-Two"¿Cómo puedo escribir esto para recorrer cada div y agregar los atributos nombre del producto y nombre traducido a mi objeto?
Está sobrescribiendo el mismo objeto. Los objetos no pueden tener claves idénticas, por lo que este último sobrescribe el primero.:
{ product:{}, product:{} } /* => */ { product: {} }
Parece como si quisieras los objetos en un objeto más grande. Si desea ambos objetos, colóquelos en una matriz:
{ products: [ {}, {} ] };
Además, debe usar atributos data-* , las claves personalizadas son para lo que están hechas.
let products = []; let translatedProducts = {}; $('.product').each(function(i) { let product = {}; product.en = $(this).data('product'); product.tr = $(this).data('translated'); products.push(product); }); translatedProducts.products = products; console.log(translatedProducts); <div class="d-none product-data"> <div class="product" data-product="English-One" data-translated="Translated-One"></div> <div class="product" data-product="English-Two" data-translated="Translated-Two"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Use una matriz y envíele cada conjunto de valores por separado
var translatedProducts = []; $('.product-data .product').each(function () { translatedProducts.push( { "product": { "en": $(this).attr('product-name'), "tr": $(this).attr('translated-name') } }); });