如何通过更改输入值来更新 javascript 中的数组对象？

Question

我想在 Javascript 中更新一个对象数组，为此我添加了一个 Fiddle。

Updated FIDDLE

有人可以指导我吗？

提前致谢

我的小提琴代码：

var category_number = 0;
var my_data = [
  {
    url: "/some/url/some_model_name.js?columns%5Bcategory_id%5D=" + category_number,  // This variable should change from updateData function
    hash_number_1: 1  
  },
  {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_2: 2
  },
  {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_3: 3
  },
  {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_4: 4
  },
  {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_5: 5
  },
];

var updateData = function() {
  var my_value = document.getElementById('my_value').value;
  if (my_value == 1) {
    category_number = 5;
  } else if (my_value == 2) {
    category_number = 1;
  } else if (my_value == 3) {
    category_number = 7;
  }
  // This category_number should update the my_data Array Object
  console.log(category_number);
  //my_data.push

  // Here is my question. Can I make the category_number to a global variable and change or any other neat way to do it?

}
$(document).on('change', '#my_value', updateData);

/* This function load once and I want the my_data change to applicable to the below function */
(function() {
    //$.each(my_datas, function(i, my_data) {
    //my_data.show_function = function() {
        //if .....
      console.log('final function');
    //}
  //}
})();

这是我的问题。我可以将 category_number 设置为全局变量并进行更改或任何其他巧妙的方法吗？

预期结果：

更新my_data第一个对象的url category_number。

例如：如果input value is 3，那么url: "/some/url/some_model_name.js?columns%5Bcategory_id%5D=7"

Answer 1

像这样：

  var my_data = [
  {
    url: "/some/url/some_model_name.js?",
    params: "columns%5Bcategory_id%5D=5",
    hash_number_1: 1  
  },
  {
    url: "/some/url/some_model_name.js?",
    params: "",
    hash_number_2: 2
  }
];

如果 category_number 数字发生变化，您可以遍历数组并更改每个字段，其中

var updateData = function() {
...
my_data[0]['params'] = "columns%5Bcategory_id%5D=" + category_number;
...
}

如果你需要url，你就这样构建它

my_data[index][url] + my_data[index][params]

由于我不知道你的应用会做什么，你也可以简单地更新第一个数组元素的 url？

Answer 2

你也可以试试这个？

var category_number = 0;
var my_data = [{
  url: "/some/url/some_model_name.js?columns%5Bcategory_id%5D=1",
  hash_number_1: 1
}, {
  url: "/some/url/some_model_name.js?",
  hash_number_2: 2
}, {
  url: "/some/url/some_model_name.js?",
  hash_number_3: 3
}, {
  url: "/some/url/some_model_name.js?",
  hash_number_4: 4
}, {
  url: "/some/url/some_model_name.js?",
  hash_number_5: 5
}];

$("#my_value").change(function() {
  var val = parseInt($(this).val());
  var category_number = 0;
  if (val == 1) {
    category_number = 5;
  } else if (val == 2) {
    category_number = 1;
  } else if (val == 3) {
    category_number = 7;
  }

  var url = my_data[0].url;
  url = url.substr(0, url.length - 1) + category_number;
  my_data[0].url = url;

  console.log(my_data);
  console.log(my_data[0]); //first object that has been updated
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="my_value" id="my_value" />

Answer 3

这个怎么样...

function getMyData(category_number) {
  return [{
    url: "/some/url/some_model_name.js?columns%5Bcategory_id%5D=" + category_number, // This variable should change from updateData function
    hash_number_1: 1
  }, {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_2: 2
  }, {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_3: 3
  }, {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_4: 4
  }, {
    url: "/some/url/some_model_name.js?", // Forget about this and it's never going to change. 
    hash_number_5: 5
  }, ];
}

var updateData = function() {
    var my_value = document.getElementById('my_value').value;
    if (my_value == 1) {
      category_number = 5;
    } else if (my_value == 2) {
      category_number = 1;
    } else if (my_value == 3) {
      category_number = 7;
    }
    // This category_number should update the my_data Array Object
    console.log(category_number);

    console.log(getMyData(category_number))
}