0

I have a set of element that has some data attributes. I am able to load single data attributes to an array of array dataAraay but on data-size which is like group of arrays in string format I don't know how to load them into the dataArray to exactly looks like

dataArray = [
        ["1","true","X1","48","14","139", "android"], 
        ["1","true","X1","49","15","135","51","15","140","ios"],
        ["1","true","X1","49","800","135","51","200","140","52","14","141" "windows"]
]

How can I fix this?

let dataArray = [];

$(".data").each(function(){
dataArray.push([ $(this).data('number'),
            $(this).data('avaiable'),
            $(this).data('brand'),
            // I have issue here on loading the zies into each array
            $(this).data('app')
          ]);

});
console.log(dataArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android" ></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios" ></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows" ></div>

3

You can surround the data-size attribute value in brackets, after which you can JSON.parse it to get an array of arrays from it. Then, flatten the array, and cast the size items to strings:

const dataArray = [...$(".data")].map(({ dataset }) => {
  const { number, avaiable, brand, size, app } = dataset;
  const flattenedStringSize = JSON.parse('[' + size + ']')
    .flat()
    .map(String);
  return [number, avaiable, brand, ...flattenedStringSize, app];
});
console.log(dataArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

Also, if possible, fix the spelling of avaiable, else it may likely cause confusion for future readers of the code.

Using Array.prototype.map and dataset makes the inclusion of jQuery nearly pointless - you may switch out the $() call with querySelectorAll, and you'll be able to remove the dependency on an external library entirely:

const dataArray = [...document.querySelectorAll(".data")].map(({ dataset }) => {
  const { number, avaiable, brand, size, app } = dataset;
  const flattenedStringSize = JSON.parse('[' + size + ']')
    .flat()
    .map(String);
  return [number, avaiable, brand, ...flattenedStringSize, app];
});
console.log(dataArray);
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

1

The answer by Certain Performance is correct and much better than the following answer, however the following answer in my opinion is much easier to understand to a basic programmer.

This code does what you were doing (I pushed the data-app at the end, since that's how you wanted), except it has a really long line right after the big .push(). What that line does is

  1. It gets the size data
  2. Converts it from an array to a string
  3. Replaces all the brackets so it becomes a string in which all the "sizes" are separated by commas
  4. Splits the string on the comma to make it an array with ALL of the size values
  5. Loops through that array and pushes the current value into dataArray

And of course, at the end, it pushes the data-app to make it into the order you wanted.

let dataArray = [];

$(".data").each(function(i) {
  dataArray.push([$(this).data('number'),
    $(this).data('avaiable'),
    $(this).data('brand')
  ]);
  $(this).data('size').toString().replace(/[\[\]]/g, '').split(",").forEach(e => dataArray[i].push(e));
  dataArray[i].push($(this).data('app'));
});
console.log(dataArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

Side note: This wouldn't affect anything in your code, but as Certain Performance mentioned in his answer, please change the spelling of avaiable to available (the correct spelling). It makes it much less confusing to people who read your code.

0

This is another solution using concat method.

let dataArray = [];

    $(".data").each(function(){
              var size = $(this).data('size').toString();
              size = size.replace(/[\[\]]/g, '').split(',');
                var item = [ $(this).data('number').toString(),
                $(this).data('avaiable').toString(),
                $(this).data('brand'),
              ].concat(size);
    item = item.concat($(this).data('app'));
    //console.log(item);
    dataArray.push(item);

    });

let dataArray = [];

$(".data").each(function(){
          var size = $(this).data('size').toString();
          size = size.replace(/[\[\]]/g, '').split(',');
            var item = [ $(this).data('number').toString(),
            $(this).data('avaiable').toString(),
            $(this).data('brand'),
          ].concat(size);
item = item.concat($(this).data('app'));
//console.log(item);
dataArray.push(item);

});
console.log(dataArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.