如何从 javascript 中的 json 创建动态列表？答案

【问题标题】：How to create dynamic lists from a json in javascript?如何从 javascript 中的 json 创建动态列表？
【发布时间】：2020-01-01 23:51:59
【问题描述】：

我正在从 REST API 检索具有以下结构的数据

job_execs = 
[{
    "build_id": 12,
    "job": {
      "name": "test_job"
    },
    "product": {
      "name": "new_product"
    },
    "time_start": "2017-08-29T01:01:19.314000-07:00",
    "time_end": "2017-08-29T01:17:07.990000-07:00",
    "status": {
      "name": "SUCCESS"
    },
    "stage_executions": [{
        "stage": {
          "name": "stage-checkout"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 119,
        "time_start": "2017-08-29T01:16:43.901000-07:00"
      },
      {
        "stage": {
          "name": "stage-wiki"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 14225,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      },
      {
        "stage": {
          "name": "stage-upload"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 14225,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      }
    ]
  },
  {
    "build_id": 13,
    "job": {
      "name": "test_job"
    },
    "product": {
      "name": "new_product"
    },
    "time_start": "2017-08-29T01:01:19.314000-07:00",
    "time_end": "2017-08-29T01:17:07.990000-07:00",
    "status": {
      "name": "SUCCESS"
    },
    "stage_executions": [{
        "stage": {
          "name": "stage-checkout"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 400,
        "time_start": "2017-08-29T01:16:43.901000-07:00"
      },
      {
        "stage": {
          "name": "stage-wiki"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 34,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      },
      {
        "stage": {
          "name": "stage-upload"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 250,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      }
    ]
  }
]

我要做的是深入了解每个作业的阶段执行情况，并为每个阶段名称生成一个列表。我想遍历每个作业并将 duration_millis 附加到适当的阶段列表中。

因此，使用我在上面发布的 JSON，我希望创建以下列表：

['stage_checkout', 119, 400]
['stage_wiki', 14225, 34]
['stage_upload', 1215, 250]

我该如何做到这一点？

任何指针甚至起点都会有所帮助。

【问题讨论】：

您可以使用for 循环 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) 遍历每项作业，并为每个作业提取所需的数据，并将其附加到您正在创建的新列表中。如果您仍然无法使其工作，请尝试一些并显示代码;）
这里的json无效，你确定这是正确的json吗？
部分括号丢失，json无效
我正在使用的 json 是有效的，这是一个错字，我刚刚修复了
仍然无效。

标签： javascript arrays list

【解决方案1】：

这可能行得通，我已将其分解为简单的函数，以便您了解这里发生的情况。

var job_execs = 
[{
    "build_id": 12,
    "job": {
      "name": "test_job"
    },
    "product": {
      "name": "new_product"
    },
    "time_start": "2017-08-29T01:01:19.314000-07:00",
    "time_end": "2017-08-29T01:17:07.990000-07:00",
    "status": {
      "name": "SUCCESS"
    },
    "stage_executions": [{
        "stage": {
          "name": "stage-checkout"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 119,
        "time_start": "2017-08-29T01:16:43.901000-07:00"
      },
      {
        "stage": {
          "name": "stage-wiki"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 14225,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      },
      {
        "stage": {
          "name": "stage-upload"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 14225,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      }
    ]
  },
  {
    "build_id": 13,
    "job": {
      "name": "test_job"
    },
    "product": {
      "name": "new_product"
    },
    "time_start": "2017-08-29T01:01:19.314000-07:00",
    "time_end": "2017-08-29T01:17:07.990000-07:00",
    "status": {
      "name": "SUCCESS"
    },
    "stage_executions": [{
        "stage": {
          "name": "stage-checkout"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 400,
        "time_start": "2017-08-29T01:16:43.901000-07:00"
      },
      {
        "stage": {
          "name": "stage-wiki"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 34,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      },
      {
        "stage": {
          "name": "stage-upload"
        },
        "status": {
          "name": "SUCCESS"
        },
        "duration_millis": 250,
        "time_start": "2017-08-29T01:16:29.599000-07:00"
      }
    ]
  }
]

const func = (arr) => {
  var ch = {};
  arr.map(ar => {
         ar.stage_executions.map((s) => {
        ch[s.stage.name] = [];
      })
  })
  return ch;
}

const func2 = (arr) => {
  var all = func(arr);
  for(var k in all) {
    arr.map((ar) => {
      ar.stage_executions.map((st) => {
        if (st.stage.name === k) {
          all[k].push(st.stage.name, st.duration_millis)
        }
      })
    })
  }
  return all;
}

const func3 = (arr) => {
  const all = func2(arr);
  for(var key in all) {
    all[key] = [...new Set(all[key])]
  }
  return all;
}

console.log(func3(job_execs))

【讨论】：

你能总结一下这三个函数是做什么的吗？我无法了解正在发生的事情。
第一个函数循环遍历数组并再次循环遍历stage_execution并将所有名称存储在一个对象中，这将确保我们只有唯一的名称，因为对象不能有重复。在第二个函数中，我们只是简单地创建一个新对象，其中 key 作为阶段名称，并将所有必需的属性推入数组。第三个函数只是从结果数组中删除所有重复项，

【解决方案2】：

此代码示例可能会对您有所帮助。我也将无效的 JSON 更改为有效的 JSON，并希望这仍然与您的数据基础相匹配。

job_execs = [{"build_id":12,"job":{"name":"test_job"},"product":{"name":"new_product"},"time_start":"2017-08-29T01:01:19.314000-07:00","time_end":"2017-08-29T01:17:07.990000-07:00","status":{"name":"SUCCESS"},"stage_executions":[{"stage":{"name":"stage-checkout"},"status":{"name":"SUCCESS"},"duration_millis":119,"time_start":"2017-08-29T01:16:43.901000-07:00"},{"stage":{"name":"stage-wiki"},"status":{"name":"SUCCESS"},"duration_millis":14225,"time_start":"2017-08-29T01:16:29.599000-07:00"},{"stage":{"name":"stage-upload"},"status":{"name":"SUCCESS"},"duration_millis":14225,"time_start":"2017-08-29T01:16:29.599000-07:00"}]},{"build_id":13,"job":{"name":"test_job"},"product":{"name":"new_product"},"time_start":"2017-08-29T01:01:19.314000-07:00","time_end":"2017-08-29T01:17:07.990000-07:00","status":{"name":"SUCCESS"},"stage_executions":[{"stage":{"name":"stage-checkout"},"status":{"name":"SUCCESS"},"duration_millis":400,"time_start":"2017-08-29T01:16:43.901000-07:00"},{"stage":{"name":"stage-wiki"},"status":{"name":"SUCCESS"},"duration_millis":34,"time_start":"2017-08-29T01:16:29.599000-07:00"},{"stage":{"name":"stage-upload"},"status":{"name":"SUCCESS"},"duration_millis":250,"time_start":"2017-08-29T01:16:29.599000-07:00"}]}]
var aCheckout = ['stage-checkout'];
var aWiki = ['stage-wiki'];
var aUpload = ['stage-upload'];

job_execs.forEach(function (build) {
  build.stage_executions.forEach(function (stage) {
	switch(stage.stage.name){
		case "stage-checkout": 
    		aCheckout.push(stage.duration_millis);
			break;
		case "stage-wiki": 
			aWiki.push(stage.duration_millis);
			break;
		case "stage-upload": 
			aUpload.push(stage.duration_millis);
			break;
    }
  });
})
console.log(aCheckout, aWiki, aUpload);

【讨论】：