使用jQuery循环遍历对象并输入某些索引答案

【问题标题】：Looping through object and inputing into certain indexes using jQuery使用jQuery循环遍历对象并输入某些索引
【发布时间】：2016-12-08 14:28:08
【问题描述】：

我希望循环一个对象并使用 jQuery 输入某些索引。我正在使用 Sweet Alert 2 和链接模式，但我需要动态生成标题。标题在下面的数组中。

SA2使用的对象如下：

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

我猜方括号后面是某种“每个”。

["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?"]

基本上我需要创建：

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

感谢您的帮助

【问题讨论】：

标签： javascript jquery arrays ajax loops

【解决方案1】：

您可以使用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)

【讨论】：

这看起来很棒。只是一个简单的问题，我很难理解结果变量在哪里传递到函数中？ @sabithpocker
map 获取您的数组并将函数应用于每个元素，然后返回存储在result 中的转换后的数组。例如：x =[1,4,9].map(Math.sqrt) 将使x 成为[1,2,3]。这里的函数接受"Washing Machine diagnosis" 并将其转换为{title: "Washing..", input:"radio",....}。阅读答案中的 MDN 页面链接。
它是否采用最接近的数组，因为我没有看到任何可以在两者之间建立联系的东西？没有变量还是在同一个函数中？
函数获取数组项作为参数，示例中为e。并且里面的函数标题设置为e。

【解决方案2】：

你需要一个模板对象：

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

然后你将遍历数组：

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;
});

如果你不喜欢assign()，也可以直接使用 Underscore.js 来克隆对象

【讨论】：

或者只是在map回调中创建新对象，是的。这可能会更容易。

【解决方案3】：

这个怎么样

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

这使用 JQuery 循环遍历数组。

【讨论】：

【解决方案4】：

我不确定我是否理解你的问题，但是这个怎么样

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
  }
})

【讨论】：