Мне нужно получить список значений во вложенных объектах в javascript / jQuery - PullRequest
0 голосов
/ 16 апреля 2020

Вот мой объект:

let regions = new Object();
  regions = {
    st0 : {
      svgId : ".st0",
      htmlId : "#olmes",
      gradientId : "st0-gradient"
    },
    st1 : {
      svgId : ".st1",
      htmlId : "#foix",
      gradientId : "st1-gradient"
    },
    st2 : {
      svgId : ".st2",
      htmlId : "#tarascon",
      gradientId : "st2-gradient"
    },
    st3 : {
      svgId : ".st3",
      htmlId : "#haute-ariege",
      gradientId : "st3-gradient"
    },
    st4 : {
      svgId : ".st4",
      htmlId : "#mirepoix",
      gradientId : "st4-gradient"
    },
    st5 : {
      svgId : ".st5",
      htmlId : "#portes-ariege",
      gradientId : "st5-gradient"
    },
    st6 : {
      svgId : ".st6",
      htmlId : "#arize-leze",
      gradientId : "st6-gradient"
    },
    st7 : {
      svgId : ".st7",
      htmlId : "#couserans",
      gradientId : "st7-gradient"
    }
  };

Вот мой jQuery код, который я создал для взаимодействия с картой SVG

  jQuery.each(regions, function(ids, cssId){
    jQuery(cssId.svgId).addClass("region")
      jQuery(cssId.svgId).click(function() {
        jQuery(".region-titre").removeClass("region-active");
        jQuery(cssId.htmlId).addClass("region-active");
        jQuery(".region").removeClass("st0-gradient st1-gradient st2-gradient st3-gradient st4-gradient st5-gradient st6-gradient st7-gradient");
        jQuery(cssId.svgId).addClass(cssId.gradientId);
     });
  });

Я ищу способ найти получить список ВСЕ градиента в списке, чтобы более правильно интегрировать его в мой jQuery код.

Спасибо за помощь, я все еще учусь, и я не могу найти его самостоятельно.

Извините если вопрос уже был задан.

Ответы [ 3 ]

0 голосов
/ 16 апреля 2020

вы можете получить ключи областей объекта, используя Object.keys. Затем перебирайте ключи с помощью функции map и генерируйте список, как вам нужно.

let regions = new Object();
  regions = {
    st0 : {
      svgId : ".st0",
      htmlId : "#olmes",
      gradientId : "st0-gradient"
    },
    st1 : {
      svgId : ".st1",
      htmlId : "#foix",
      gradientId : "st1-gradient"
    },
    st2 : {
      svgId : ".st2",
      htmlId : "#tarascon",
      gradientId : "st2-gradient"
    },
    st3 : {
      svgId : ".st3",
      htmlId : "#haute-ariege",
      gradientId : "st3-gradient"
    },
    st4 : {
      svgId : ".st4",
      htmlId : "#mirepoix",
      gradientId : "st4-gradient"
    },
    st5 : {
      svgId : ".st5",
      htmlId : "#portes-ariege",
      gradientId : "st5-gradient"
    },
    st6 : {
      svgId : ".st6",
      htmlId : "#arize-leze",
      gradientId : "st6-gradient"
    },
    st7 : {
      svgId : ".st7",
      htmlId : "#couserans",
      gradientId : "st7-gradient"
    }
  };

Object.keys(regions).map(key => regions[key].gradientId)

Вывод

["st0-gradient", "st1-gradient", "st2-gradient", "st3-gradient", "st4-gradient", "st5-gradient", "st6-gradient", "st7-gradient"]
0 голосов
/ 16 апреля 2020

Первые строки вашего скрипта не нужны. В первой строке вы создаете новый пустой объект и присваиваете его переменной regions. Затем на следующей строке вы переназначаете значение этой переменной другому объекту, который вы создаете. {key: val, ...} - это способ построения объектов в javascript, и вы можете просто написать

let regions = {
 st0 : {
      svgId : ".st0",
      htmlId : "#olmes",
      gradientId : "st0-gradient"
    },
//...
};

Ответ, который дал Рори МакКроссан, верен ({ ссылка }), но я ' Я бы сказал, что вы можете переписать свою логику c так, чтобы ее было проще поддерживать. Кажется, что большинство ваших значений, которые вы используете, могут быть построены из порядка, который они имеют в вашем списке, поэтому я бы посоветовал вам просто создать список регионов и немного обновить свой jQuery, как я покажу ниже. Это означало бы, что вам не нужно повторяться во многих местах со всеми рисками, чтобы где-то ошибиться.

let regions = [
    "#olmes",
    "#foix",
    "#tarascon",
    "#haute-ariege",
    "#mirepoix",
    "#portes-ariege",
    "#arize-leze",
    "#couserans",
];

function makeGradientId(id){ return ".st" + id + "-gradient" };
function makeSvgId(id){ return ".st" + id };
// in javascript, an array can be regarded as a fancy object with the keys '0', '1', '2', '3',...
const allGradientIds = Object.keys(regions).map(makeGradientId);

jQuery.each(function(index, htmlId) {
    const svgId = makeSvgId(index);
    const gradientId = allGradientIds[index];

    jQuery(svgId).addClass("region");
    jQuery(svgId).click(function() {
        jQuery(".region-titre").removeClass("region-active");
        jQuery(htmlId).addClass("region-active");
        jQuery(".region").removeClass(allGradientIds.join(" "));
        jQuery(svgId).addClass(gradientId);
    });
});

В более современных javascript мы написали бы вспомогательные функции выше как:

const makeGradientId = (id) => `.st${id}-gradient`;
const makeSvgId = (id) => `.st${id}`;

, который, на мой взгляд, легче читать, но может потребовать некоторой практики, чтобы привыкнуть. (см. https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ и https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)

0 голосов
/ 16 апреля 2020

Для этого вы можете использовать Object.values для получения массива, содержащего все объекты, затем map() для построения массива, содержащего только значения gradientId:

var gradients = Object.values(regions).map(o => o.gradientId);

let regions = {
  st0: {
    svgId: ".st0",
    htmlId: "#olmes",
    gradientId: "st0-gradient"
  },
  st1: {
    svgId: ".st1",
    htmlId: "#foix",
    gradientId: "st1-gradient"
  },
  st2: {
    svgId: ".st2",
    htmlId: "#tarascon",
    gradientId: "st2-gradient"
  },
  st3: {
    svgId: ".st3",
    htmlId: "#haute-ariege",
    gradientId: "st3-gradient"
  },
  st4: {
    svgId: ".st4",
    htmlId: "#mirepoix",
    gradientId: "st4-gradient"
  },
  st5: {
    svgId: ".st5",
    htmlId: "#portes-ariege",
    gradientId: "st5-gradient"
  },
  st6: {
    svgId: ".st6",
    htmlId: "#arize-leze",
    gradientId: "st6-gradient"
  },
  st7: {
    svgId: ".st7",
    htmlId: "#couserans",
    gradientId: "st7-gradient"
  }
};

var gradients = Object.values(regions).map(o => o.gradientId);
console.log(gradients);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Следует отметить, что Object.values изначально недоступен в IE. A polyfill доступен, хотя.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...