如何通過更改輸入值來更新JavaScript中的數組對象？

Question

我想更新Javascript中的對象數組，為此添加了一個Fiddle。

更新了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;
...
}

如果您需要網址，則可以像這樣構建它

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