訪問對象中的數據並使用篩選數據創建新對象

Question

我正在嘗試搜索對象中的特定節點並顯示包含所需數據的新對象。 每種復合類型中可能有單個或多個字段，如下所示。

這是原始對象：

{
  "section": "personal",
  "fields": [
    {
      "type": "composite",
      "name": "name",
      "label": "Name",
      "fields": [
        {
          "type": "text",
          "name": "given",
          "label": "First name",
          "value": "Joe"
        },
        {
          "type": "text",
          "name": "family",
          "label": "Last name",
          "value": "Smith"
        }
      ]
    },
    {
      "type": "composite",
      "name": "address",
      "label": "Address",
      "fields": [
        {
          "type": "text",
          "name": "streetName",
          "label": "Street Name",
          "value": "1 High St"
        },
        {
          "type": "text",
          "name": "city",
          "label": "City",
          "value": "New York"
        }
      ]
    }
  ]
}

生成的對象應如下所示：

{
  name: {
    given: "Joe",
    family: "Smith",
  },
  address: {
    streetName: "1 Hight St",
    city: "New York"
  }
}

編輯***理想情況下，我想找出一種方法來使用javascript方法（map / reduce / filter）和/或lodash來提出答案。

這更像是我用內置方法到目前為止所看到的內容。

 var convertVals = function() { var data = fields.fields; var filter = data.filter(function(form) { return form }) .filter(function(form) { return form.name && form.fields; }) .map(function(form) { return {form.name, [form.name.name]: form.name.value}; }) }; convertVals(); 

謝謝，

Answer 1

好吧，你走吧！ 想想我可能會對它進行一次破解，因為沒有更多的問題進入。

 var originalObject = { "section": "personal", "fields": [ { "type": "composite", "name": "name", "label": "Name", "fields": [ { "type": "text", "name": "given", "label": "First name", "value": "Joe" }, { "type": "text", "name": "family", "label": "Last name", "value": "Smith" } ] }, { "type": "composite", "name": "address", "label": "Address", "fields": [ { "type": "text", "name": "streetName", "label": "Street Name", "value": "1 High St" }, { "type": "text", "name": "city", "label": "City", "value": "New York" } ] } ] }; function convertVals(obj){ var retObj = {}; for(var i=0;i<obj.fields.length;i++){ var tempObj={}; for(var j=0;j<obj.fields[i].fields.length;j++){ tempObj[obj.fields[i].fields[j].name] = obj.fields[i].fields[j].value; } retObj[obj.fields[i].name] = tempObj; } return retObj; } console.log(convertVals(originalObject)); /* Should return: { name: { given: "Joe", family: "Smith", }, address: { streetName: "1 Hight St", city: "New York" } } */ 

Answer 2

這是一個lodash解決方案，它使用keyBy為每個字段分配鍵，並使用mapValues獲取每個字段的值。

function getFields(data) {
  return data.value || _(data.fields)
    .keyBy('name')
    .mapValues(getFields)
    .value();
}

 var data = { "section": "personal", "fields": [{ "type": "composite", "name": "name", "label": "Name", "fields": [{ "type": "text", "name": "given", "label": "First name", "value": "Joe" }, { "type": "text", "name": "family", "label": "Last name", "value": "Smith" } ] }, { "type": "composite", "name": "address", "label": "Address", "fields": [{ "type": "text", "name": "streetName", "label": "Street Name", "value": "1 High St" }, { "type": "text", "name": "city", "label": "City", "value": "New York" } ] } ] }; function getFields(data) { return data.value || _(data.fields) .keyBy('name') .mapValues(getFields) .value(); } console.log(getFields(data)); 

 body > div { min-height: 100%; top: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 

在上面的解決方案中有一個隱藏的含義，如果value包含falsey值，那么它將忽略該value並假設有一個fields值。 為了解決這個問題，我們可以使用has來檢查是否存在value鍵，然后執行與上面相同的操作。

function getFields(data) {
  return _.has(data, 'value')? data.value: 
    _(data.fields)
    .keyBy('name')
    .mapValues(getFields)
    .value();
}

 var data = { "section": "personal", "fields": [{ "type": "composite", "name": "name", "label": "Name", "fields": [{ "type": "text", "name": "given", "label": "First name", "value": "Joe" }, { "type": "text", "name": "family", "label": "Last name", "value": "Smith" } ] }, { "type": "composite", "name": "address", "label": "Address", "fields": [{ "type": "text", "name": "streetName", "label": "Street Name", "value": "1 High St" }, { "type": "text", "name": "city", "label": "City", "value": "New York" } ] } ] }; function getFields(data) { return _.has(data, 'value')? data.value: _(data.fields) .keyBy('name') .mapValues(getFields) .value(); } console.log(getFields(data)); 

 body > div { min-height: 100%; top: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 

Answer 3

您可以使用Array.prototype.reduce()來迭代嵌套fields數組。 將父對象的"name"屬性值設置為對象的屬性名，其值設置為對象的"name"和"value"子對象"fields"數組中對象的屬性

 var data = { "section": "personal", "fields": [ { "type": "composite", "name": "name", "label": "Name", "fields": [ { "type": "text", "name": "given", "label": "First name", "value": "Joe" }, { "type": "text", "name": "family", "label": "Last name", "value": "Smith" } ] }, { "type": "composite", "name": "address", "label": "Address", "fields": [ { "type": "text", "name": "streetName", "label": "Street Name", "value": "1 High St" }, { "type": "text", "name": "city", "label": "City", "value": "New York" } ] } ] } var res = data.fields.reduce((o, {name, fields}) => (o[name] = fields.reduce((curr, {name:key, value}) => (curr[key] = value, curr),{}), o), {}); console.log(res);