Преобразовать формат Json для круга упаковки Диаграммы

Question

Я черчение диаграммы, и для этого я хочу, чтобы преобразовать ниже JSON

var jsonArray = [{ 
      "tagValueName": "PCI",  
      "tagValueId": 1, 
      "priorityAlertsCount": 20, 
      "investigationAlertsCount": 140, 
      "incidentAlertsCount": 100, 
      "otherAlertsCount": 40 
     }, { 
      "tagValueName": "ABC", 
      "tagValueId": 2, 
      "priorityAlertsCount": 100, 
      "investigationAlertsCount": 60, 
      "incidentAlertsCount": 20, 
      "otherAlertsCount": 20 
     }]; 

Но схема требует данных в нижеуказанном формате

var jsonData = [{ 
       "tagValueName" : "PCI", 
       "type": "priorityAlertsCount", 
       "count": "20", 
      }, 
      { 
       "tagValueName" : "PCI", 
       "type": "investigationAlertsCount", 
       "count": "140", 
      }, 
      { 
       "tagValueName" : "PCI", 
       "type": "incidentAlertsCount", 
       "count": "100", 
      }, 
      { 
       "tagValueName" : "PCI", 
       "type": "otherAlertsCount", 
       "count": "40", 
      },{ 
       "tagValueName" : "ABC", 
       "type": "priorityAlertsCount", 
       "count": "100", 
      },{ 
       "tagValueName" : "ABC", 
       "type": "investigationAlertsCount", 
       "count": "60", 
      }]; 

Как я могу конвертировать JSON из моего формата в требуемый формат диаграммы?
Помогите, поскольку я новичок в JS?

Я хочу построить график, подобный this.

Answer 1

Посмотрите на this jsbin.

var jsonArray = [{ 
    "tagValueName": "PCI",  
    "tagValueId": 1, 
    "priorityAlertsCount": 20, 
    "investigationAlertsCount": 140, 
    "incidentAlertsCount": 100, 
    "otherAlertsCount": 40 
}, { 
    "tagValueName": "ABC", 
    "tagValueId": 2, 
    "priorityAlertsCount": 100, 
    "investigationAlertsCount": 60, 
    "incidentAlertsCount": 20, 
    "otherAlertsCount": 20 
}]; 

var descriptionProperties = ['tagValueName', 'tagValueId']; 
var nameProperty = ['tagValueName']; 

function formatData(dataArray) { 
    return dataArray.reduce(function(acc, item) { 
    var formattedItems = Object.keys(item) 
     .filter(function(key) { 
     return descriptionProperties.indexOf(key) === -1; 
     }) 
     .map(function(key) { 
     var obj = {}; 
     var value = item[key]; 
     obj.type = key; 
     obj.count = value; 
     obj[nameProperty] = item[nameProperty]; 
     return obj; 
     }); 
    acc = acc.concat(formattedItems); 
    return acc; 
    }, []); 
} 

console.log(formatData(jsonArray)); 

В основном вы должны взглянуть на основные функции массивов, таких как concat, а также функции высшего порядка map, filter и reduce, которые я использовал для преобразования данных так, как вам необходимо.

Answer 2

Вы можете использовать array#reduce для итерации по вашему массиву, а затем используйте Object.keys, чтобы перебирать свойство каждого объекта. Если имя ключа содержит count в конце имени, добавьте это свойство для вывода.

var jsonArray = [{ "tagValueName": "PCI", "tagValueId": 1, "priorityAlertsCount": 20, "investigationAlertsCount": 140, "incidentAlertsCount": 100, "otherAlertsCount": 40 }, { "tagValueName": "ABC", "tagValueId": 2, "priorityAlertsCount": 100, "investigationAlertsCount":60, "incidentAlertsCount": 20, "otherAlertsCount": 20 }]; 
 

 
var result = jsonArray.reduce((r, o) => { 
 
    Object.keys(o).forEach(key => { 
 
    if(/count$/i.test(key)) { 
 
     r.push({tagValueName: o.tagValueName, type: key, count: o[key]}); 
 
    } 
 
    }) 
 
    return r; 
 
},[]); 
 

 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }