We Keep Coding

Reload Data with .sort from Dynamic Table with Jquery | JSON | Sort with New Data

I have been trying for a few days that when I use the .sort property the data is eliminated or modified instead of it being reloaded as new lines.
Attach Captures from the code Working
Image1 How work the code when i press the button, this sort to the highest price to lowest but how do you can see in the second image, the code appears up and this not delete the old data
Marked with "X" the data that does not have to show
this fragment is the one that generates the tables dynamically
const mostrarProductos = () => {
$.getJSON(URLJSON, (respuesta) => {
for (let z of respuesta) {
productosv2.push(z);
}
for (let x of productosv2) {
$("#fila").append(`
<tr class="deleteProductos">
<div class="card text-center" style="width: 18rem;" id='btnBorrarCarrito'>
<div class="card-body">
<input type="hidden" id="idProd" value="${x.id}"> </td>
<td class="card-title" id="${x.id}">${x.producto}</h2> </td>
<td class="card-text">$ ${x.precio}</p></td>
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<td><button type="button" class="btn btn-success" onclick="agregarCarrito(${x.id})">Agregar</button></td>
</div>
</div>
</div>
</tr>
`);
}
$("#fila").fadeIn("5000");
});
};
And this function is what orders them
function respuestaClickExpensive() {
$("#fila").html('');
let productosordenados = productosv2.sort((a, b) => {
if (a.precio > b.precio) {
return -1;
}
if (a.precio < b.precio) {
return 1;
}
return 0;
});
return productosordenados;
}
The one that orders them from smallest to largest is the same only that different signs and names.
As you can see I tried to use a ".html ("")" since previously in another cart attempt it used .innerHtml (Which does not work in this case either, Also the code of the cart is totally different from that moment that it worked for me
)
I tried the following:
$ ("#fila"). empty ();
Make another function to clean with .empty
Use Native JavaScript to generate the code.
$ ("#fila"). remove (); this removes all the content for me but does not regenerate it.
Change the HTML tag "Row" to a previous div which, since the div was not generated again, did not generate it again.
$ ("#fila tr"). remove ();
And some more things that I don't remember right now.
If you can guide me on what I did wrong or any suggestions to fix it, I appreciate it.
If I had to follow a template about posting on StackOverFlow or having chosen or named in a different way, I appreciate your comment since it is my first post
Project notes of possible relevance: The complete code outside of html and css is made with Native JavaScript, Jquery, Ajax, SASS and BootStrap.

Is there a method to implement through data attributes in JavaScript?

I want implement the card content in the card when expanded, I have used the help of JavaScript to implement the title, image, description ,I have used 'data-title' and 'data-type' for displaying title and image respectively which are by the working fine and when I try to implement card description by using data-desc attribute , it is displaying 'undefined'.
Anyone please help me with my code.
My code link: https://codepen.io/Avatar_73/pen/ExyNdMK
const getCardContent = (title, type, desc) => {
return `
<div class="card-content">
<h2>${title}</h2>
<img src="./assets/${type}.png" alt="${title}">
<p>${desc}</p>
</div>
`;
}
<div class="cards">
<div class="card" data-type="html" data-desc="I am HTML">
<h2>HTML5</h2>
</div>
</div>

On line 115, you forgot to pass the desc to your getCardContent function
Change to:
const content = getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

Change your calling method signature from
getCardContent(card.textContent, card.dataset.type)
to
getCardContent(card.textContent, card.dataset.type, card.dataset.desc)
you are not passing the third parameter(card.dataset.desc) in the method thus it is rendering the value as undefined.

Vue getter returns undefined when page reload

I have a blog with some posts. When you click on the preview you will redirect on the page post.
On the page of the post, I use a getter to load the correct post (I use the find function to return object.name which corresponds to the correct object in the array of objects).
const state = {
ricettario: [], // data that contains all recipes (array of objects)
}
const actions = {
// Bind State and Firestore collection
init: firestoreAction(({ bindFirestoreRef }) => {
bindFirestoreRef('ricettario', db.collection('____').orderBy('data'))
})
const getters = {
caricaRicetta(state) {
console.log('Vuex Getter FIRED => ', state.ricettario)
return nameParamByComponent => state.ricettario.find(ricetta => {
return ricetta.name === nameParamByComponent
})
}
}
In the component, I call the getter in the computed property
computed: {
...mapGetters('ricettaStore', ['caricaRicetta']),
ricetta() {
return this.caricaRicetta(this.slug) // this.slug is the prop of the URL (by Router)
}
}
Anything goes in the right way but when I reload the page in the POST PAGE, the getter will fire 2 times:
1. return an error because the state is null
2. return the correct object
// screen below
So everything works fine from the front but not at all in the console and in the App.
I think the correct way is to call the getters in the created hook. What I've to change? It is a problem with the computed prop, getters or state?
POST PAGE:
<template>
<div v-if="ricetta.validate === true" id="sezione-ricetta">
<div class="container">
<div class="row">
<div class="col s12 m10 offset-m1 l8 offset-l2">
<img
class="img-fluid"
:src="ricetta.img"
:alt="'Ricetta ' + ricetta.titolo"
:title="ricetta.titolo"
/>
</div>
</div>
</div>
</div>
<div v-else>
...
</div>
</template>

You are trying to validate undifined property. So you need to check ricetta first.
Try like this:
<div v-if="ricetta && ricetta.validate === true" id="sezione-ricetta">

Database synchronization is asynchronous, ricettario is initially an empty array. Computed value is recomputed once synchronization is finished and ricettario array is filled, the component is updated.
Even if ricettario weren't empty, find may return undefined if it finds nothing. This needs to be handled where ricetta is used:
<div v-if="ricetta && ricetta.validate" id="sezione-ricetta">

The error log is quite explicit, there is a xxx.validate somewhere in your Ricetta component template, but that xxx is undefined.
Because of this, your app crashes and stops working. I doubt it has anything to do with Vuex

Auto Refresh Div container

I have function like:
document.getElementById("IR_0_ph").innerHTML = sent_dict["IR_0"];
and i get this info like: h2 id="IR_0_ph" class="number">0</h2>
All work fine, but he not auto update info, if i manual reloat page all its good, but i need auto update this info.
mb i can refresh just main Div Container or .... ?
function data_handler(sent_dict) {
socket.emit("control_event", {
data: "Hello!"
}); // tell the RPI that the wifi connection is still working
document.getElementById("IR_0_ph").innerHTML = sent_dict["IR_0"];
document.getElementById("IR_1_ph").innerHTML = sent_dict["IR_1"];
document.getElementById("IR_4_ph").innerHTML = sent_dict["IR_4"];
document.getElementById("IR_Yaw_right_ph").innerHTML = sent_dict["IR_Yaw_right"];
document.getElementById("IR_Yaw_left_ph").innerHTML = sent_dict["IR_Yaw_left"];
document.getElementById("Yaw_ph").innerHTML = sent_dict["Yaw"];
document.getElementById("p_part_ph").innerHTML = sent_dict["p_part"];
document.getElementById("alpha_ph").innerHTML = sent_dict["alpha"];
document.getElementById("Kp_ph").innerHTML = sent_dict["Kp"];
document.getElementById("Kd_ph").innerHTML = sent_dict["Kd"];
document.getElementById("blue_percentage_ph").innerHTML = sent_dict["blue_percentage"];
stored_state = document.getElementById("state_table_1_ph").innerHTML;
new_state = sent_dict["AUTO_STATE"];
if (new_state != stored_state) {
insert_into_state_table_ph(new_state);
}
document.getElementById("manual_state_ph").innerHTML = sent_dict["manual_state"];
document.getElementById("mode_ph").innerHTML = sent_dict["mode"];
}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="statistic__item">
<h2 id="IR_0_ph" class="number">unknown</h2>
<span class="desc">FRONT SIDE</span>
<div class="icon">
<i class="zmdi zmdi-account-o"></i>
</div>
</div>
</div>
</div>
</div>

1) How data_handler function being called from what way, is it called from some async flow or its just a one time calling function.
2) Where the sent_dict is coming from ?
Not sure How you are calling, and how sent_dict data passing to dataHandler function. Assuming sent_dict is a server call or device response.
There are two use cases or senarios:
1) calling once.
example:
ajaxCall.then(sent_dict => data_handler(sent_dict));
if yes, perform the ajax call in intervals using setTimeout function of javascript.
setTimeout(ajaxCall, interval_time).
or you can use observable interval operator to mimic the same behavior without doing much. which will automatically update the div on each time response gets from server.
2) if it is calling more than once or interval based calling.
following code in not enough to answer your question.

Why is append() adding markup multiple times as opposed to just once?

I'm using jQuery's append() and the forEach() function to map through an array of objects, displaying the data to a slideshow. Although the array has one object in it, the resulting markup has extra data, essentially the append() method is appending the same markup 2x or more times.
I've tried to remove the markup and instead replace it with "Hello World" (no tags) and it renders correctly. However, when I input "Hello World", it will be appending 3 times as opposed to once. I've console.logged the array to ensure that it only contains one object before and during the forEach() method and can confirm that there is only one element in the array, therefore this is an issue with append()
$.getJSON(
`${window.location.origin}/public/js/config/shopCards.json`,
function(res) {
var featuredItems = res.filter(function(item) {
return item.isFeatured;
});
if (featuredItems.length === 0) {
$('.featured-items').empty();
return;
}
console.log(featuredItems, featuredItems);
featuredItems.forEach(function(item) {
console.log(item);
$('.siema-home').append(`
<div class="card card-shop home-card ${
item.isExclusive ? 'exclusive' : ''
} ${item.isOnSale ? 'sale' : ''} ${item.isFeatured ? 'featured' : ''} ${item.isSemiExclusive ? 'semiExclusive' : ''}" data-id=${item.id}>
<div style="position: relative">
<img src=${
item.thumbnailURL
} class="card-img-top" alt=${item.projectName} draggable="false"/>
<div class="card-more-details">
<p class="helper-text">Click For More Details</p>
${
item.isExclusive
? '<span class="badge badge-warning mb-2">Exclusive Build</span>'
: ''
}
${
item.isSemiExclusive
? '<span class="badge badge-danger mb-2">Semi-Exclusive Build</span>'
: ''
}
${
item.isOnSale
? '<span class="badge badge-success mb-2">On Sale</span>'
: ''
}
${
item.isFeatured
? '<span class="badge badge-info mb-2">Featured</span>'
: ''
}
</div>
</div>
<div class="card-body card-shop-body">
<div>
<h5 class="card-title-shop text-center">
${item.projectName}
</h5>
<p class="card-price text-center">$${item.price}</p>
</div>
</div>
</div>`);
});
I expect to only see one "shop-card" in the slider.
The actual output is 3 cards in the slider.
Debug information: Chrome w/ Dev console
Full index.html available here (for further scrutiny)

So after tedious work and testing, I found out that the issue was actually with the slider, Siema, which actually duplicates the markup and adds it back into the siema-home div. Another issue was with using width: 100% with Siema, which causes the slider to break and display the extra-slides it created side-by-side with the markup appended by the append() function.
TLDR: This was an issue with the slider and the fix was to edit the width from 100% to a smaller value or used a definite pixel value.