Having issue on loading complex attributes data into array of array

Question

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>

CertainPerformance · Accepted Answer · 2019-04-15 23:54:33Z

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>

Aniket G · Accepted Answer · 2019-04-15 23:56:36Z

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

It gets the size data
Converts it from an array to a string
Replaces all the brackets so it becomes a string in which all the "sizes" are separated by commas
Splits the string on the comma to make it an array with ALL of the size values
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.

Hien Nguyen · Accepted Answer · 2019-04-16 00:32:48Z

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>

Collectives™ on Stack Overflow

Having issue on loading complex attributes data into array of array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related