What is the best way to extract data from multiple instances of <span> tags and store them in an array?

Question

What is the best way to extract data from multiple instances of <span> tags and store them in an array?

I am in search of the most effective method for extracting multiple span tags from various spans and organizing them into an array or JSON object for future use. (I'm unsure whether an array or JSON is the optimal choice.)

HTML:

<span class="car" id=c1 data-make="volvo" data-year="2010">Car1<span>
<span class="car" id=c2 data-make="saab" data-year="1998">Car2<span>

JavaScript:

var cars = document.getElementsByClassName('car');
for(var i=0; i<cars.length; i++) { 
  <- what should be included here? ->
}

Currently, I have created three separate arrays for ID, make, and year, but it seems disorganized. I am struggling with how to create:

    Array(
[0] => Array(
        [id] => c1 
        [make] => volvo
        [year] => 2010
    )
[1] => Array(
        [id] => c2
        [make] => SAAB  
        [year] => 1998    
    )
);

Or a JSON object:

jsonString = [
    {
        "id": "c1",
        "make": "volvo",
        "year": "2010",
    },
    {
        "id": "c2",
        "make": "saab",
        "year": "1998", 
    }
];

The purpose of this is simple. I intend to use this information to replace innerHTML like so:

document.getElementById(car[id]).innerHTML = car[make]

So, two questions: 1) What would be more suitable for this task - multi-dimensional array or JSON object? 2) What should be inserted in the section of my loop to store the data in that array or JSON?

Thank you - I am still gaining knowledge.

javascript arrays json

Answer 1

Answer №1

To extract all the data- attributes from each element, iterate through each attribute and store them in a separate object:

var output = [],
    regExp = /^data-/;

for(var index = 0, len = elements.length; index < len; index++) { 
    var currentElement = elements[index],
        attributes = currentElement.attributes,
        dataObject = {};

    // setting the ID
    dataObject.id = currentElement.id;

    // iterating over all attributes
    for(var count = 0, attrLen = attributes.length; count < attrLen; count++) {
        var attrName = attributes[count].name;
        if(regExp.test(attrName)) { 
            // remove the 'data-' part and add the value to the object
            dataObject[attrName.replace(regExp, '')] = attributes[count].value;
        }
    }

    // adding the object to the final array
    output.push(dataObject);
}

SEE DEMO

Answer 2

To extract all the data- attributes from each element, iterate through each attribute and store them in a separate object:

var output = [],
    regExp = /^data-/;

for(var index = 0, len = elements.length; index < len; index++) { 
    var currentElement = elements[index],
        attributes = currentElement.attributes,
        dataObject = {};

    // setting the ID
    dataObject.id = currentElement.id;

    // iterating over all attributes
    for(var count = 0, attrLen = attributes.length; count < attrLen; count++) {
        var attrName = attributes[count].name;
        if(regExp.test(attrName)) { 
            // remove the 'data-' part and add the value to the object
            dataObject[attrName.replace(regExp, '')] = attributes[count].value;
        }
    }

    // adding the object to the final array
    output.push(dataObject);
}

SEE DEMO

Answer 3

Answer №2

For those open to utilizing jQuery, the following code can be employed. Otherwise, Felix's solution is recommended.

An array of objects should be utilized in the following manner:

let arr = [];
$("span").each(function(i) {
    arr[i] = {};
    arr[i]["id"] = $(this).attr("id");
    arr[i]["make"] = $(this).data("make");
    arr[i]["year"] = $(this).data("year");
});

Answer 4

For those open to utilizing jQuery, the following code can be employed. Otherwise, Felix's solution is recommended.

An array of objects should be utilized in the following manner:

let arr = [];
$("span").each(function(i) {
    arr[i] = {};
    arr[i]["id"] = $(this).attr("id");
    arr[i]["make"] = $(this).data("make");
    arr[i]["year"] = $(this).data("year");
});

What is the best way to extract data from multiple instances of <span> tags and store them in an array?

Answer №1

Answer №2

Similar questions

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Display the Vaxis line in a bar graph using Google Chart

What methods can I use to gauge the performance of my angular website?

Having trouble simulating JavaScript Math.random in Jest?

Utilizing v-data-iterator in Vuetify to display data fetched from an API in a table

Retrieving multiple selected row values using an ASP Repeater

Focused Filtering in DataGrid Pagination

Discover the process of retrieving HTML elements from a different webpage and incorporating them into your own site

jQuery simple authentication is not functioning as expected

How to update an object in an array within a collection using ExpressJS and MongoDB

Optimizing Angular for search engines: step-by-step guide

Looking for a unique way to access the array at index zero

The Facebook messenger checkbox plugin does not appear to be displaying correctly

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

accessing specific data within a JSON object using its index

Design a feature to remove an item from MongoDB using Mongoose with Node.js and express.js on a web application

What is the best way to conceal a div when there are no visible children using AngularJS?

Is there a way to automatically interpret and analyze a gruntfile in order to make changes to it and then resave it?

Python is experiencing difficulties with copying xpath elements

Is it necessary to compile Jade templates only once?