Consolidate duplicate list entries and adjust the CSS as needed

Question

Consolidate duplicate list entries and adjust the CSS as needed

Imagine I have an array like this:

myarray = ["apple", "apple", "apple", "potato", "apple"];

myarray = ["apple", "apple", "apple", "potato", "apple"];
           
             function listCreate(data) {
  var output = '<ul>';
  $.each(data, function(key, val) {

  output += '<li">';
  output += '<h4 >' + val + '</h4>';
  output += '</li>';
  
  });
  output += '</ul>';
  $('#mylist').html(output);
}
listCreate(myarray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mylist">
    </div>

I generate a list using jQuery

And I need to merge n repeating values and change the li height to n*50px

Example

myarray = ["apple", "apple", "apple", "potato", "apple"];

<ul>

<li style="background:#A6445E; height:150px;">apple</li>
<li style="background:#FFD433; height:50px;">potato</li>
<li style="background:#A6445E; height:50px;">apple</li>

</ul>

Example

myarray =["potato", "volvo", "volvo", "potato", "apple"];

<ul>

    <li style="background:#A7777E; height:50px;">potato</li>
    <li style="background:#FFD433; height:100px;">volvo</li>
    <li style="background:#A4565E; height:50px;">potato</li>
    <li style="background:#A2125E; height:50px;">apple</li>

</ul>

javascript jquery html css

Answer 1

Answer №1

To eliminate consecutive duplicates in an array, simply create a new array using the original one, but skipping duplicates that appear one after the other:

myarray = ["apple", "apple", "apple", "potato", "apple", "apple"];

var temp = myarray[0];
var fixedMyArray = [temp]; 
var myArrayCounter = [];
var counter = 1;
for (var i = 1; i < myarray.length; i++) {
    if (temp != myarray[i]) {
        temp = myarray[i];
        fixedMyArray.push(temp);
        myArrayCounter.push(counter);
        counter = 1;
    }
    else
    {
        counter++;
    }
}
myArrayCounter.push(counter);

function createList(data,dataCounter) {
    var output = '<ul>';
    var temp = 50;
    for(var i = 0; i < data.length; i++)
    {

        output += '<li style="background:#A7777E; height:' + temp*dataCounter[i] + 'px;">';
        output += '<h4 >' + data[i] + '</h4>';
        output += '</li>';

    }
    output += '</ul>';
    $('#mylist').html(output);



}
createList(fixedMyArray,myArrayCounter);

Then use fixedMyArray and myArrayCounter in place of myarray inside your function.

createList(fixedMyArray,myArrayCounter);

Check out the JSFiddle demo here: http://jsfiddle.net/jpdjbcjt/1/

Answer 2

To eliminate consecutive duplicates in an array, simply create a new array using the original one, but skipping duplicates that appear one after the other:

myarray = ["apple", "apple", "apple", "potato", "apple", "apple"];

var temp = myarray[0];
var fixedMyArray = [temp]; 
var myArrayCounter = [];
var counter = 1;
for (var i = 1; i < myarray.length; i++) {
    if (temp != myarray[i]) {
        temp = myarray[i];
        fixedMyArray.push(temp);
        myArrayCounter.push(counter);
        counter = 1;
    }
    else
    {
        counter++;
    }
}
myArrayCounter.push(counter);

function createList(data,dataCounter) {
    var output = '<ul>';
    var temp = 50;
    for(var i = 0; i < data.length; i++)
    {

        output += '<li style="background:#A7777E; height:' + temp*dataCounter[i] + 'px;">';
        output += '<h4 >' + data[i] + '</h4>';
        output += '</li>';

    }
    output += '</ul>';
    $('#mylist').html(output);



}
createList(fixedMyArray,myArrayCounter);

Then use fixedMyArray and myArrayCounter in place of myarray inside your function.

createList(fixedMyArray,myArrayCounter);

Check out the JSFiddle demo here: http://jsfiddle.net/jpdjbcjt/1/

Answer 3

Answer №2

If you need to implement a counter to determine the correct class rather than the correct style, there is a solution using jQuery.
Here is the code snippet for HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mylist"></div>
</body>
</html>

This is the CSS code:

.small {
  background:#FFD433;
  height:50px;
}
.large {
  background:#A6445E;
  height:150px;
}

And here is the Javascript code:

var myarray = ["apple", "apple", "apple", "potato", "apple"], 
  listCreate = function  (data) {
  var output = $('<ul>'),
    listItem = $('<li>'),
    i,
    length = myarray.length - 1,
    counter = [];
  for(i = 0; i <= length; i += 1) {
    counter[data[i]] = counter[data[i]] + 1 | 1; 
    listItem
    .clone()
    .text(data[i])
    .addClass((counter[data[i]] === 1)? 'large': 'small')
    .appendTo(output);
  }
  $('#mylist').append(output);
};
listCreate(myarray);

For more details, you can visit jsbin.com:
http://jsbin.com/covakuseru/1/edit?html,css,js,output

Answer 4

If you need to implement a counter to determine the correct class rather than the correct style, there is a solution using jQuery.
Here is the code snippet for HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mylist"></div>
</body>
</html>

This is the CSS code:

.small {
  background:#FFD433;
  height:50px;
}
.large {
  background:#A6445E;
  height:150px;
}

And here is the Javascript code:

var myarray = ["apple", "apple", "apple", "potato", "apple"], 
  listCreate = function  (data) {
  var output = $('<ul>'),
    listItem = $('<li>'),
    i,
    length = myarray.length - 1,
    counter = [];
  for(i = 0; i <= length; i += 1) {
    counter[data[i]] = counter[data[i]] + 1 | 1; 
    listItem
    .clone()
    .text(data[i])
    .addClass((counter[data[i]] === 1)? 'large': 'small')
    .appendTo(output);
  }
  $('#mylist').append(output);
};
listCreate(myarray);

For more details, you can visit jsbin.com:
http://jsbin.com/covakuseru/1/edit?html,css,js,output

Answer 5

Answer №3

Give this a shot:

Fiddle Link

The custom function function generate(array, colors) requires two parameters: array (

["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"]

) and colors (

["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]

), both should be arrays.

HTML:

<div id="myList"></div>

JavaScript:

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    console.log(counts);
    console.log(newArray);
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

generate(["potato", "volvo", "volvo", "potato", "apple"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myList"></div>

Answer 6

Give this a shot:

Fiddle Link

The custom function function generate(array, colors) requires two parameters: array (

["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"]

) and colors (

["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]

), both should be arrays.

HTML:

<div id="myList"></div>

JavaScript:

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

function generate(array, colors) {
    var newArray = [];
    var counts = {};
    var c = 0;
    var unique = '1';
    for (i = 0; i < array.length; i++) {
        if (array[i + 1] != array[i] || i == (array.length - 1)) {
            newArray.push(array[i]);
            if (array[i] != array[i - 1]) {
                counts[unique] = 1;
            }
            unique++;
        } else {
            c = c === 0 ? 1 : c;
            counts[unique] = ++c;
            c--;
        }
    }
    console.log(counts);
    console.log(newArray);
    $('#myList').append('<ul></ul>');
    for (i = 0; i < newArray.length; i++) {
        
        $('ul').append('<li class="' + i + '">' + newArray[i] + '</li>');
        $('.' + i).css({'height': 50 * counts[i + 1] + 'px', 'background-color': colors[i]});
    }
}

generate(["potato", "potato", "volvo", "volvo", "potato", "apple", "apple", "banana"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E", "#FFD433"]);

generate(["potato", "volvo", "volvo", "potato", "apple"], ["#A7777E", "#FFD433", "#A4565E", "#A2125E"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myList"></div>

Consolidate duplicate list entries and adjust the CSS as needed

Answer №1

Answer №2

Answer №3

Fiddle Link

HTML:

JavaScript:

Similar questions

What is the functionality of Mongoose for handling multiple updates?

Utilize Javascript to trigger AJAX refreshes only when necessary

Displaying Multiple HighCharts on a single AngularJS page

set ajax url dynamically according to the selected option value

Creating a webpage with a layout that features three full-length columns using

What is the proper method for passing arguments to a function?

Error retrieving data from the ngresource properties resource

Learn how to incorporate a click event with the <nuxt-img> component in Vue

unable to retrieve the value of the table row with a particular class designation

Utilize Angular to simultaneously filter search results by URL and make selections in a dropdown menu

Button Fails to Respond on Second Click

Acquiring a property from an object that is specified within a function

Unable to get spacing correct on loading page

Substituting ng-init with scope variables results in failure

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

What could be the reason for Google Maps producing a static map instead of a dynamic one?

css subcategories - divs failing to meet css criteria

Finding the data type based on the button clicked with javascript: A beginner's guide

javascript image alert

The initial execution of the getDocs function may encounter some difficulties