如何遍历JSON属性并将值分配给数组元素？ASP.NET MVC 5新手求助

别担心，刚接触JSON遇到这种需求很正常，我来给你两种常见场景的解决方案，你可以根据自己的实际情况选择：

场景1：前端JavaScript处理（给表单字段赋值/生成值数组） #

假设你已经通过Ajax/fetch从Web API拿到了返回的JSON对象，我们可以直接遍历它的属性来完成需求：

方式1：直接生成所有值的数组 #

如果只需要把所有属性值提取到数组里，用Object.values()一步就能搞定：

// 模拟从API获取的JSON数据
const apiData = { "id": 1, "Name": "ABCDE Shipping", "AddressL1": "1234 ABC Lane", "AddressL2": null };

// 提取所有值到数组
const valueArray = Object.values(apiData);
console.log(valueArray); 
// 输出：[1, "ABCDE Shipping", "1234 ABC Lane", null]

方式2：遍历键值对，给对应表单字段赋值 #

如果要把每个属性值对应到表单里的字段（比如id对应name为id的输入框），可以用Object.entries()遍历键值对，然后匹配表单元素：

const apiData = { "id": 1, "Name": "ABCDE Shipping", "AddressL1": "1234 ABC Lane", "AddressL2": null };

// 遍历每个属性名和对应的值
Object.entries(apiData).forEach(([propName, propValue]) => {
  // 根据name属性找到对应的表单输入框
  const inputField = document.querySelector(`input[name="${propName}"]`);
  if (inputField) {
    // 处理null值，避免输入框显示"null"字符串
    inputField.value = propValue ?? '';
  }
});

如果你的项目用了jQuery，也可以这样写：

const apiData = { "id": 1, "Name": "ABCDE Shipping", "AddressL1": "1234 ABC Lane", "AddressL2": null };

$.each(apiData, function(key, value) {
  // 找到对应name的输入框，把null转为空字符串
  $(`input[name="${key}"]`).val(value === null ? '' : value);
});

场景2：后端C#处理（生成值数组） #

如果是在ASP.NET MVC5的后端代码里需要把JSON的属性值放到数组中，你可以先把JSON反序列化成实体类，再提取值：

步骤1：定义对应JSON结构的实体类 #

public class ShippingDetail
{
    public int id { get; set; }
    public string Name { get; set; }
    public string AddressL1 { get; set; }
    public string AddressL2 { get; set; }
}

步骤2：反序列化JSON并生成数组 #

// 假设这是从Web API获取到的JSON字符串
string jsonResponse = "{ \"id\": 1, \"Name\": \"ABCDE Shipping\", \"AddressL1\": \"1234 ABC Lane\", \"AddressL2\": null }";

// 用Newtonsoft.Json反序列化（ASP.NET MVC5默认自带这个库）
var shippingData = Newtonsoft.Json.JsonConvert.DeserializeObject<ShippingDetail>(jsonResponse);

// 将属性值存入数组
object[] valueArray = new object[] 
{ 
    shippingData.id, 
    shippingData.Name, 
    shippingData.AddressL1, 
    shippingData.AddressL2 
};

这样就能轻松完成你需要的遍历和数组赋值啦～

内容的提问来源于stack exchange，提问作者ic3man7019