Looping through object and inputing into certain indexes using jQuery

Question

I am looking to loop through an object and input into certain indexes using jQuery. I am using Sweet Alert 2 and the chaining modals but I need to generate the titles dynamically. The titles are in the array below.

The object used by SA2 is the following:

var steps = [{
    title: 'Questions', 
    input: 'radio', 
    inputOptions: inputOptions, 
}]

I guess 'each' of some kind after the squared bracket.

["Washing Machine diagnosis", "Washing Machine type", "Have you ever had an engineer look at this fault?", "Has an engineer looked at this appliance in the last 6 months?", "Has anybody that is not a qualified repair engineer attempted to repair the Washing Machine?", "Duration of problem", "When did you purchase this Washing Machine?", "Do you have a receipt?"]

Essentailly I need to create:

var steps = [{
    title: 'Washing Machine diagnosis', 
    input: 'radio', 
    inputOptions: inputOptions, 
},
{
    title: 'Washing Machine diagnosis', 
    input: 'radio', 
    inputOptions: inputOptions, 
}]

Thank you for any help

sabithpocker · Accepted Answer · 2016-12-08 14:35:33Z

2

You can use Array.map()

es6

var result = ["Washing Machine diagnosis", "Washing Machine type", "Have you ever had an engineer look at this fault?", "Has an engineer looked at this appliance in the last 6 months?", "Has anybody that is not a qualified repair engineer attempted to repair the Washing Machine?", "Duration of problem", "When did you purchase this Washing Machine?", "Do you have a receipt?"]
             .map(e => ({title:e,input:"radio",inputOptions:{}}));
console.log(result)

es5

var result = ["Washing Machine diagnosis", "Washing Machine type", "Have you ever had an engineer look at this fault?", "Has an engineer looked at this appliance in the last 6 months?", "Has anybody that is not a qualified repair engineer attempted to repair the Washing Machine?", "Duration of problem", "When did you purchase this Washing Machine?", "Do you have a receipt?"]
             .map(function(e){
               return {title:e,input:"radio",inputOptions:{}};
               });
console.log(result)

answered Dec 8, 2016 at 14:35

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Parsons Over a year ago

This looks great. Just a quick question on it, I am struggling to understand where the result variable gets passed into the function? @sabithpocker

sabithpocker Over a year ago

map takes your array and applies the function to each element, then returns the transformed array which is stored in result. Eg: x =[1,4,9].map(Math.sqrt) will make x as [1,2,3]. Here the function takes "Washing Machine diagnosis" and converts it to {title: "Washing..", input:"radio",....}. Read the MDN page link in the answer.

James Parsons Over a year ago

Does it take the closest array because I dont see anything that makes the connection between the two? No variable or in the same function?

sabithpocker Over a year ago

The function gets the array item as parameter, e in the example. And inside the function title is set to e.

Mister Spock · Accepted Answer · 2016-12-08 14:40:55Z

1

You need a template object:

var step = {
    title        : '',
    input        : 'radio',
    inputOptions : inputOptions
};

Then you will just iterate through the array:

var titles = [
    "Washing Machine diagnosis",
    "Washing Machine type",
    ...
    "Do you have a receipt?"
];

var steps = titles.map((title) => {
    var clone = Object.assign({}, step);
    clone.title = title;
    return clone;
});

or just use Underscore.js to clone objects if you do not like assign()

answered Dec 8, 2016 at 14:40

Mister Spock

2311 silver badge6 bronze badges

1 Comment

Mister Spock Over a year ago

Or just create new object in map callback, yes. It may be event easier.

Luke101 · Accepted Answer · 2016-12-08 14:35:02Z

0

How about this

$.each(steps, function(i, step){
     step.title = myArray[i];
});

This uses JQuery to loop through the array.

answered Dec 8, 2016 at 14:35

Luke101

65.7k89 gold badges247 silver badges377 bronze badges

Comments

Mati · Accepted Answer · 2016-12-08 14:37:39Z

0

I'm not sure i've understand your question but how about this

const titles = ["Washing Machine diagnosis", "Washing Machine type", "Have you ever had an engineer look at this fault?", "Has an engineer looked at this appliance in the last 6 months?", "Has anybody that is not a qualified repair engineer attempted to repair the Washing Machine?", "Duration of problem", "When did you purchase this Washing Machine?", "Do you have a receipt?"]

const steps = titles.map((title) => {
  return {
    title,
    input: 'radio',
    inputOptions
  }
})

answered Dec 8, 2016 at 14:37

Mati

1,1481 gold badge12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Looping through object and inputing into certain indexes using jQuery

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related