JavaScript - Создание сетки Kendo Ui с использованием xml данных

Question

Я использовал XSLT для отображения моей xml-страницы. Я использую следующие, чтобы получить данные из файла XML:

< XSL: стоимость из выберите = "ClinicalDocument/компонент/structuredBody/компонент [3]/раздел/текст/таблицы/TBODY"/ >

После этого у меня есть следующие JavaScript для очистки данных и сделать преобразование:

-----------Get Content for Grids---------- 

    //Split Content into array 
    var purposeArray = document.getElementById('purposeOfVisit').innerHTML.split("\n"); 
    var activeProblemArray = document.getElementById('activeProblems').innerHTML.split("\n"); 


    //------------ Remove All Unwanted Values-----------\\*/ 
    var newDataString =""; 
    for(var k = 0; k < purposeArray.length; k++) 
    { 
     newDataString += purposeArray[k] + "__"; 
    } 
    newDataString = newDataString.replace(/ /g,""); 
    newDataString = newDataString.replace(/__________/g,"__-__"); 
    var newDataArray = newDataString.split("__"); 

    //------------- Save Values in final Array -------------\\*/ 
    var semiFinalArray = new Array(); 
    for(var x=0; x < newDataArray.length; x++) 
    { 
     if(newDataArray[x].length != 0) 
     { 
      semiFinalArray.push(newDataArray[x]); 
     } 
    } 
    var finalArray = new Array(); 
    var counter = 0; 
    //------------ Find Number of Columns in row ------------\\*/ 
    var numberOfRows = document.getElementById('numberOfRows').innerHTML; 
    var numberOfColumns = document.getElementById('numberOfColumns').innerHTML; 
    var columnsPerRow = parseInt(numberOfColumns)/parseInt(numberOfRows); 

    //------------------------------Testing ------------------------------// 
    var dataNamePre = "dataValue"; 

    var temporaryArray = new Array(); 
    var dataName; 

     //----------- Generate Grid Values -----------// 
    for(var b=0 ; b < semiFinalArray.length ; b = b + columnsPerRow) 
    { 
     var problemComment = ""; 
     counter = 0; 
     var obj; 

     for(var a=0 ; a < columnsPerRow ; a++) 
     { 
      dataName = dataNamePre + counter.toString() + ""; 
    //-------Generate Grid Titles------// 
      temporaryArray.push("Title " + (counter+1)); 

      var key = "key"+a; 

      obj = { values : semiFinalArray[b+a] }; 

      var problemComment = ""; 
      finalArray.push(obj); 

      counter++; 
     } 
    } 
    //---------------------Generate GridArray---------------------------// 

    var gridArray = []; 
    var gridArrayHead = new Array(); 
    counter = 0; 
    var objectValue = new Array(); 

    for(var x = 0; x < finalArray.length; x++) 
    { 
     objectValue = { head:temporaryArray[x], values: finalArray[x].values } 
     gridArray.push(objectValue); 
    } 

    var provFacilities = []; 

    for(var x = 0; x < finalArray.length; x++) 
    { 
     provFacilities[x] = 
     { 
      head:temporaryArray[x], values: finalArray[x].values 
     } 
    } 

    //alert(gridArray); 
    $("#grid").kendoGrid(
    { 
     columns: 
     [{ 
      title:gridArray.head, 
      template:'#= values #' 
     }], 
     dataSource: { 
      data:finalArray, 
      pageSize:10 
     }, 
     scrollable:false, 
     pageable:true 
    }); 

Это может быть обходной способ, но я по-прежнему новичок в этом методе кодирования. В настоящее время все данные представлены в одном столбце, причем последнее значение в моем временном массиве является заголовком столбца.

Все работает, пока не попытаюсь установить DataSource для сетки Kendo. При работе в свойстве столбцов в сетке, я сделал следующие изменения:

название: gridArray [0] .Head

Когда это будет сделано, то название меняется на первый значение в массиве.

Что я хочу знать, как я могу генерировать столбцы в сетке Kendo Согласно названию? Есть ли способ перебирать все значения и создавать объекты оттуда, видя, что дата, отправленная в сетку, является объектами в массиве?

То, что я в принципе хочу что-то, чтобы сделать эту работу, без выводятся повторяющиеся:.

вар myGrid = $ ("# сетки") kendoGrid ({столбцы: [{ название: temporaryArray [0 ],
поле: finalArray [0] .values}, { название: temporaryArray [1],
поле: finalArray [1] .values}, { название: temporaryArray [2],
поле: finalArray [ 2] .values}, { название: te mporaryArray [3],
поле: finalArray [3] .values}, { название: temporaryArray [4],
поле: finalArray [4] .values}] )};

Любая помощь приветствуется, спасибо!

Answer 1

Эта проблема была решена с помощью следующего кодирования:

var arrayData = []; 

for(var x = 0; x < semiFinalArray.length; x=x+5) 
{ 
    var tempArr = new Array(); 

    for(var y = 0; y < 5; y++) 
    { 
     var num = x + y; 
     tempArr.push(semiFinalArray[num]); 
    } 
    arrayData.push(tempArr); 
} 

var dataTitles = []; 
for(var x = 0; x < titleArray.length; x++) 
{ 
    var head = ""; 
    head = titleArray[x]; 
    head = head.replace(/ /g,""); 
    dataTitles.push(head); 
} 


var counter = 0; 
var columnDefs = []; 
for (var i = 0; i < columnsPerRow.length; i++) 
{ 
    if (counter == (columnsPerRow - 1)) 
    { 
     counter = 0; 
    } 
    columnDefs.push({ field: dataTitles[counter], template: arrayData[i].values }); 
    counter++; 
} 
// Create final version of grid array 
var gridArray = []; 
for (var i = 0; i < arrayData.length; i++) 
{ 
    var data = {}; 
    for (var j = 0; j < dataTitles.length; j++) 
    { 
     data[dataTitles[j]] = arrayData[i][j]; 
    } 
    gridArray.push(data); 
} 
// Now, create the grid using columnDefs as argument 
$("#grid").kendoGrid(
{ 
    dataSource: 
    { 
     data: gridArray, 
     pageSize: 10 
    }, 
    columns: columnDefs, 
    scrollable: false, 
    pageable: true 
}).data("kendoGrid"); 

При этом, данные отображаются в DataGrid.