Estoy tratando de crear una aplicación de búsqueda que busque productos. Tengo un script PHP que devuelve resultados en formato JSON cuando se publica una palabra clave. Publico allí con axios.
Ahora, si hay 40 resultados, por ejemplo, el menú desplegable de resultados será demasiado largo. Así que quiero crear un nuevo objeto a partir del objeto de 40 resultados y limitar este objeto a 6.
Intenté esto creando una función dentro computed así:
Object(this.responseData) es mi objeto completo con todos los resultados de mi script PHP en un objeto JSON. filteredData es mi nuevo objeto que agregué en mis data .
test(){ var fullResults = Object(this.responseData); var number = 0; for (var key in fullResults) { number++; if(!number > 6){ this.filteredData[number] += fullResults[key] } } console.log(this.filteredData) }, Pero mi registro solo muestra: Proxy {} . ¿Qué estoy haciendo mal? Necesito obtener todos los resultados del objeto anterior y agregarlos a un nuevo objeto vacío con un límite de 6.
Este es mi JS completo:
let app = Vue.createApp({ data: function(){ return{ // Object to fill with JSON response responseData:{}, // Object to fill with filtered result (max 6) filteredData: {}, showResultDiv: false, totalResults: 0 } }, methods:{ // Function to show loading dots until json returned loadDiv(condition, content){ this.showResultDiv = condition }, async fetchResults(){ await axios.post('includes/searchproducts_json.php', { // Post data, add value of input to searchterm searchterm: this.$refs.searchterm.value }) .then((response)=>{ this.responseData = response.data // Get length of returned object and add to totalResults this.totalResults = Object.keys(this.responseData).length console.log(Object(this.responseData)); }) .catch((error)=>{ console.log(error) }) } }, computed: { filteredObject(){ return this.responseData }, test(){ var fullResults = Object(this.responseData); var number = 0; for (var key in fullResults) { number++; if(!number > 6){ this.filteredData[number] += fullResults[key] } } console.log(this.filteredData) }, // Set totalResults with matching string resultString(){ if(this.totalResults == 1){ return this.totalResults + ' resultaat' }else{ return this.totalResults + ' resultaten' } } } }) app.mount('#v_search');Su conjunto de resultados de búsqueda debería ser realmente una matriz (de objetos de resultado).
Algo como:
[ {"id": 1, "text": "foo"}, {"id": 2, "text": "bar"}, {"id": 3, "text": "baz"}, ... ]O, más elegante:
{ "searchterm": "input value" "total_results": 31, "limit": 10, "page": 2, "results": [ {"id": 1, "text": "foo"}, {"id": 2, "text": "bar"}, {"id": 3, "text": "baz"}, ... ] }Entonces, el cálculo debería ser tan simple como:
data() { return { results: [] } }, computed: { resultsToShow() { return this.results.slice(0, 6) } }, methods:{ fetchResults() { axios.post('includes/searchproducts_json.php', { // Post data, add value of input to searchterm searchterm: this.$refs.searchterm.value }) .then((response) => { if (response.status === 200 && response.data.length) { this.results = response.data } }) .catch(console.error) } }Vea una demostración funcional: https://codesandbox.io/s/thirsty-germain-i6w4w?file=/src/App.vue
Y debido a que es solo una slice simple, incluso podría eliminar (la sobrecarga de) la propiedad calculada y simplemente escribirla en la expresión en línea de la plantilla:
<ol> <li v-for="(result, index) in results.slice(0, 6)" :key="index"> {{ result.text }} </li> </ol>Object.keys() devuelve una matriz de claves de objeto, que podría ser lo que está buscando si lo entiendo correctamente. Entonces podría crear una propiedad calculada algo como esto:
test() { return Object.keys(this.responseData).map((key) => this.responseData[key]).slice(0,6); }Esto transforma el objeto en una matriz, después de lo cual puede usar un método de división simple para obtener los primeros 6 elementos.