Конвертировать карту в массив - Angular 6 и JHipster

Question

Цель: Чтобы преобразовать карту, которую я получил с сервера, в массив, чтобы она появилась в HTML. Действительно, на форумах я видел, что карта не подходит для структурной директивы * ngFor.

Попробуйте:

Карта выглядит следующим образом (в действительности внутри объектов также есть объекты, но я не думаю, что это сильно меняет результат):

{

«Миссия 1»: [ { "id": 1 "Quantite": 0 «дата»: 2018-04-01 }, { "id": 2 "Quantite": 0 «дата»: 2018-04-02 } ]

«Миссия 2»: [ { "id": 3 "Quantite": 0 «дата»: 2018-04-01 }, { "id": 4 "Quantite": 0 «дата»: 2018-04-02 } ]

}

Я пытался использовать этот код:

     this.mapToArray = Array.from(this.map);

Выпуск: Ну и карта найдена. Но затем для mapToArray он устанавливается в значение undefined, как будто ничего не произошло с Array.from (map).

Не могли бы вы помочь мне, пожалуйста?

Спасибо!

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ

Эй,

Спасибо за ваши ответы.

Во-первых, методы, связанные с картой, такие как forEach () и другие, не работают. Я могу ошибаться, но из того, что я увидел во время моих исследований, интерфейс Map недоступен в TypeScript (это язык, используемый в Angular 5-6). Я попробовал предложенные вами решения, но не смог заставить его работать.

Во-вторых, я мало продвинулся, но мне чего-то не хватает. Если у вас есть идеи:

Сторона машинописного текста

export class DetailComponent implements OnInit, OnDestroy {



map: { [index:string], ArrayList:Details } = {};

valueMission: ArrayList<Details>;

constructor(private activatedRoute: ActivatedRoute) { }

ngOnInit() {

    this.activatedRoute.data.subscribe(({ details }) => {
        this.map = details;
        this.valueMission = this.map["Mission 1"];
    });

    }

HTML Side

<p> {{valueMission[0].dayOfMonth}}</p>

Комментарий

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

Спасибо,

Маню

Answer 1

Спасибо всем за ваши комментарии. Каждый из них помог мне. Я решил свою проблему.

Одно решение:

 this.activatedRoute.data.subscribe(({ details }) => {
        this.map = details;

        const keysOfMap = Object.keys(details);

        const arrayOfArrays: ArrayList = [];

        for (let keyOfMap in keysOfMap){

            const valueMission = this.map[keysOfMap[keyOfMap]];

            arrayOfArrays.push(valueMission);
        }

        this.arrayOfArrays = arrayOfArrays;
        this.keysOfMap = keysOfMap;
    });

Тогда эти два массива можно рассматривать как любой массив в представлении HTML.

Еще раз спасибо за ваше время!

Answer 2

Вы можете сделать это:

var obj = {
      "Mission 1": [{
          "id": 1,
          "quantite": 0,
          "date": 2018 - 04 - 01
      }, {
          "id": 2,
          "quantite": 0,
          "date": 2018 - 04 - 02
      }],

      "Mission 2": [{
          "id": 3,
          "quantite": 0,
          "date": 2018 - 04 - 01
      }, {
          "id": 4,
          "quantite": 0,
          "date": 2018 - 04 - 02
      }]

     };
     
     var array = [];
     var i = 0;
     for (var mission in obj) {
       array[i] = array.concat(obj[mission]);
       i++;
     }
     
     console.log(array);

Answer 3

Предполагая, что ваши данные выглядят так:

data = {

    "Mission 1":[ { "id": 1 "quantite":0 "date" : 2018-04-01 }, { "id": 2 "quantite":0 "date" : 2018-04-02 } ],

    "Mission 2":[ { "id": 3 "quantite":0 "date" : 2018-04-01 }, { "id": 4 "quantite":0 "date" : 2018-04-02 } ]

}

тогда вы можете получить массив всех элементов данных, сопоставив их по ключам, т.е.

let result = Object.keys(dataKey => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   // the value you return here will be used to form the elements of your array
   // so do whatever transformation you want to do here
   return data[dataKey];
});

result будет массивом, похожим на:

[
   [ { "id": 1 "quantite":0 "date" : 2018-04-01 }, { "id": 2 "quantite":0 "date" : 2018-04-02 } ],
   [ { "id": 3 "quantite":0 "date" : 2018-04-01 }, { "id": 4 "quantite":0 "date" : 2018-04-02 } ]

]

Конечно, маловероятно, что вам понадобится массив массивов, поэтому в рамках обратного вызова вы можете преобразовать каждый элемент вашего результата во все, что имеет смысл. Так, например, если вместо массива массивов я могу сгладить его до одного результата, выполнив:

let result = Object.keys(dataKey => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   // in this case, i want the first data item of each 'mission'
   return data[dataKey][0];
});

и result будут:

 [
   { "id": 1 "quantite":0 "date" : 2018-04-01 },
   { "id": 3 "quantite":0 "date" : 2018-04-01 },
]

или другой пример,

 let result2 = Object.keys(missionName => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   return {
       missionName: missionName,
       firstMission: data[missionName][0],
       missions: data[missionName],
   };
});

и result2 будут выглядеть так:

[
 {
   missionName: "Mission 1",
   firstMission: { "id": 1 "quantite":0 "date" : 2018-04-01 },
   missions: [
    { "id": 1 "quantite":0 "date" : 2018-04-01 }, 
    { "id": 2 "quantite":0 "date" : 2018-04-02 }
   ],
 }, 
 {
   missionName: "Mission 2", 
   ....
 }
]

и так далее. Действительно, все, что происходит внутри этого обратного вызова, зависит от того, как вы хотите, чтобы ваш конечный результат выглядел.

Answer 4

data {} - это объект, прежде всего я бы посоветовал вам преобразовать его в массив и применить функцию карты. Внутри функции карты вы должны выполнить функцию фильтра, потому что снова у вас есть внутренние объекты миссий

 var data = {

            "Mission 1": [{
                "id": 1,
                "quantite": 0,
                "date": 2018 - 04 - 01
            }, {
                "id": 2,
                "quantite": 0,
                "date": 2018 - 04 - 02
            }],

            "Mission 2": [{
                "id": 3,
                "quantite": 0,
                "date": 2018 - 04 - 01
            }, {
                "id": 4,
                "quantite": 0,
                "date": 2018 - 04 - 02
            }]

        };



    var anArray = [];
//push to an empty array if the data is an object to apply map function
            anArray.push(data)
            var data1 = anArray.map(function (item) {
                var items = [];
                Object.keys(item).forEach(function (key, index) {                        
                    item[key].forEach(function (inneritem, index) {
                        items.push(inneritem);
                    });
                });
                return items;
            });

            var allDatas = data1[0];