Manipulating the content of an array based on a specific key value using JavaScript's

Question

Manipulating the content of an array based on a specific key value using JavaScript's

Looking for a way to utilize a multidimensional array fruits in my code. The goal is to splice and push the values from the suggestFruits array into either the red or green fruits array based on the type specified. For example, items with type:1 should go to the "Red Fruits" table, while items with type:2 should go to the "Green Fruits" table. Any suggestions on how to achieve this would be highly appreciated!


                var red = {};
                var green = {};
                var random = {};
                var fruits = [];

                var fruits1 = {["fruit"]:"Apple", ["type"]:"1"}
                var fruits2 = {["fruit"]:"Tomato", ["type"]:"1"}
                var fruits3 = {["fruit"]:"Lime", ["type"]:"2"}
                var fruits4 = {["fruit"]:"Guava", ["type"]:"2"}

                // Add fruits to main array
                fruits.push(fruits1,fruits2,fruits3,fruits4);
                console.log(fruits);

                // Filter suggestFruits
                var suggestFruits = fruits.filter(x => x.fruit).map(x => x.fruit);
                console.log(suggestFruits);

                // Initial fruit arrays
                var key = "Red Fruits";
                red[key] = ['Apple', 'Cherry', 'Strawberry','Pomegranate','Raspberry'];

                var key2 = "Green Fruits";
                green[key2] = ['Watermelon', 'Durian', 'Avocado','Lime', 'Honeydew'];

                var key3 = "Random Fruits";
                random[key3] = suggestFruits;

                function redraw() {
                    // Redraw fruit displays
                }

                function listener() {
                    // Event listeners for clicking fruits
                }


                .pilldiv {
                  padding: 8px 15px;
                  text-align: center;
                  font-size: 15px;
                  border-radius: 25px;
                  color: Black;
                  margin: 2px;
                }


                <!DOCTYPE html>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <html>
                <head>
                    ...
                </body>
                </html>

javascript html css arrays

Answer 1

Answer №1

There is quite a bit to unpack in this query, but it seems like your objective is straightforward: move fruits with type === "1" to the red fruits array, and fruits with type === "2" to the green fruits array.

The key issue you are facing with categorizing the suggestedFruits into red and green groups is that the type information gets lost when creating the suggestedFruits array. To address this, you can refer back to the original fruits array to retain the information.

Here's an approach to achieve this:

var fruits = [
  {fruit:"Apple", type:"1"},
  {fruit:"Tomato", type:"1"},
  {fruit:"Lime", type:"2"},
  {fruit:"Guava", type:"2"},
];
// create a mapping for fruit types
var fruitTypeMap = {"1": "Red Fruits", "2": "Green Fruits"}
// container for different fruit types
var fruitTypes = {
  "Red Fruits": ['Apple', 'Cherry', 'Strawberry','Pomegranate','Rassberry'],
  "Green Fruits": ['Watermelon', 'Durian', 'Avacado','Lime','Honeydew'],
  "Random Fruits": fruits.map(fruit => fruit.fruit)
};
// clone element for easy creation of fruit-pills
var clonePill = $(".clone");
// initialize the red/green/random pills
Object.keys(fruitTypes).forEach(key => {
  fruitTypes[key].forEach(fruit => {
    var $newFruit = clonePill.clone();
    // remove clone class for visibility and avoid re-cloning
    $newFruit.removeClass("clone");
    // set the text
    $newFruit.text(fruit);
    // append to the correct list in DOM
    $(`[data-fruits="${key}"]`).append($newFruit);
  });
});

// function to handle moving fruits between categories
function moveFruit (e) {
  // get the category from data-fruits property on parent container
  var fruitCategory = $(this).parent().data("fruits");
  var fruitName = $(this).text();
  // detach the fruit element from DOM and store it temporarily
  var $fruit = $(this).detach();
  if (fruitCategory === "Random Fruits") {
    // get the type number from the original fruits array
    var fruitType = fruits.find(fruit => fruit.fruit === fruitName).type;
    // find the correct array for the fruit
    var fruitArr = fruitTypes[fruitTypeMap[fruitType]];
    // index of the fruit in current array
    var fruitIndex = fruitTypes["Random Fruits"].indexOf(fruitName);
    // splice out from current array and insert into destination array
    fruitArr.push(fruitTypes["Random Fruits"].splice(fruitIndex, 1)[0]);
    // add movable class for toggling back to Random Fruits
    $fruit.addClass("movable");
    // add to the correct list in the DOM
    $(`[data-fruits="${fruitTypeMap[fruitType]}"]`).append($fruit); 
  }
  else {
    var fruitArr = fruitTypes[fruitCategory];
    var fruitIndex = fruitArr.indexOf(fruitName);
    fruitTypes["Random Fruits"].push(fruitArr.splice(fruitIndex, 1)[0]);
    $('[data-fruits="Random Fruits"]').append($fruit); 
  }
}
$(".red-fruits, .green-fruits").on("click", ".movable", moveFruit);
$(".random-fruits").on("click", ".fruit-pill", moveFruit);

.clone {
  display: none;
}
.fruit-pill {
  border-radius: 20px;
  padding: 10px 15px;
  display: inline-block;
}
.movable {
  cursor: pointer;
}
.red-fruits > .fruit-pill {
  background-color: rgba(255, 0, 0, 0.6);
}
.red-fruits > .movable {
  background-color: rgb(255, 150, 150);
}
.green-fruits > .fruit-pill {
  background-color: rgba(0, 255, 0, 0.7);
}
.green-fruits > .movable {
  background-color: rgb(200, 255, 175);
}
.random-fruits > .fruit-pill {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits-container">
  <div class="red-fruits" data-fruits="Red Fruits">
  </div>
  <div class="green-fruits" data-fruits="Green Fruits">
  </div>
  <div class="random-fruits" data-fruits="Random Fruits">
  </div>
</div>
<div class="fruit-pill clone"></div>

Answer 2

There is quite a bit to unpack in this query, but it seems like your objective is straightforward: move fruits with type === "1" to the red fruits array, and fruits with type === "2" to the green fruits array.

The key issue you are facing with categorizing the suggestedFruits into red and green groups is that the type information gets lost when creating the suggestedFruits array. To address this, you can refer back to the original fruits array to retain the information.

Here's an approach to achieve this:

var fruits = [
  {fruit:"Apple", type:"1"},
  {fruit:"Tomato", type:"1"},
  {fruit:"Lime", type:"2"},
  {fruit:"Guava", type:"2"},
];
// create a mapping for fruit types
var fruitTypeMap = {"1": "Red Fruits", "2": "Green Fruits"}
// container for different fruit types
var fruitTypes = {
  "Red Fruits": ['Apple', 'Cherry', 'Strawberry','Pomegranate','Rassberry'],
  "Green Fruits": ['Watermelon', 'Durian', 'Avacado','Lime','Honeydew'],
  "Random Fruits": fruits.map(fruit => fruit.fruit)
};
// clone element for easy creation of fruit-pills
var clonePill = $(".clone");
// initialize the red/green/random pills
Object.keys(fruitTypes).forEach(key => {
  fruitTypes[key].forEach(fruit => {
    var $newFruit = clonePill.clone();
    // remove clone class for visibility and avoid re-cloning
    $newFruit.removeClass("clone");
    // set the text
    $newFruit.text(fruit);
    // append to the correct list in DOM
    $(`[data-fruits="${key}"]`).append($newFruit);
  });
});

// function to handle moving fruits between categories
function moveFruit (e) {
  // get the category from data-fruits property on parent container
  var fruitCategory = $(this).parent().data("fruits");
  var fruitName = $(this).text();
  // detach the fruit element from DOM and store it temporarily
  var $fruit = $(this).detach();
  if (fruitCategory === "Random Fruits") {
    // get the type number from the original fruits array
    var fruitType = fruits.find(fruit => fruit.fruit === fruitName).type;
    // find the correct array for the fruit
    var fruitArr = fruitTypes[fruitTypeMap[fruitType]];
    // index of the fruit in current array
    var fruitIndex = fruitTypes["Random Fruits"].indexOf(fruitName);
    // splice out from current array and insert into destination array
    fruitArr.push(fruitTypes["Random Fruits"].splice(fruitIndex, 1)[0]);
    // add movable class for toggling back to Random Fruits
    $fruit.addClass("movable");
    // add to the correct list in the DOM
    $(`[data-fruits="${fruitTypeMap[fruitType]}"]`).append($fruit); 
  }
  else {
    var fruitArr = fruitTypes[fruitCategory];
    var fruitIndex = fruitArr.indexOf(fruitName);
    fruitTypes["Random Fruits"].push(fruitArr.splice(fruitIndex, 1)[0]);
    $('[data-fruits="Random Fruits"]').append($fruit); 
  }
}
$(".red-fruits, .green-fruits").on("click", ".movable", moveFruit);
$(".random-fruits").on("click", ".fruit-pill", moveFruit);

.clone {
  display: none;
}
.fruit-pill {
  border-radius: 20px;
  padding: 10px 15px;
  display: inline-block;
}
.movable {
  cursor: pointer;
}
.red-fruits > .fruit-pill {
  background-color: rgba(255, 0, 0, 0.6);
}
.red-fruits > .movable {
  background-color: rgb(255, 150, 150);
}
.green-fruits > .fruit-pill {
  background-color: rgba(0, 255, 0, 0.7);
}
.green-fruits > .movable {
  background-color: rgb(200, 255, 175);
}
.random-fruits > .fruit-pill {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits-container">
  <div class="red-fruits" data-fruits="Red Fruits">
  </div>
  <div class="green-fruits" data-fruits="Green Fruits">
  </div>
  <div class="random-fruits" data-fruits="Random Fruits">
  </div>
</div>
<div class="fruit-pill clone"></div>

Manipulating the content of an array based on a specific key value using JavaScript's

Answer №1

Similar questions

Is there a way to modify the state following a sorting operation?

Unable to establish a connection between two localhost servers

Creating custom shaders for YouTube videos within a Three.js userscript

utilizing the active class with react js

What steps should I follow to make a brief .mp3 audio file play with each keystroke?

Tips on automatically centering an image within a div as it is resized

Verify whether a component is a React.ReactElement<any> instance within a child mapping operation

I possess three stylish CSS buttons, however, the other one is accompanied by <br />

tips for organizing the <div> element horizontally within a design

Is it obligatory to reply with status code 200 in Express?

Unraveling a JSON array in PHP

Troubleshooting the Ui-router refresh problem

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

Delivering a static Angular app through an Express Server

Show a specific div element from an external webpage within an iframe

How to fix the issue of a static background image in Bootstrap that does not

Tap on the child to reveal their parent

What is the best method to merge duplicate arrays based on their values using PHP?

Executing the countdown function within the catch/error block of $http.post does not work as expected in Vue.js

Continuously encountering IndexErrors while attempting to manipulate char arrays