Блог

Главная - Вопросы по программированию - Выберите по имени в объекте

Выберите по имени в объекте

#jquery #json

Вопрос:

Во-первых, я все еще учусь, так что, пожалуйста, будьте нежны 🙂 У меня есть ответ json, в котором я хочу выбрать некоторые конкретные элементы. Я пытаюсь получить некоторые элементы с определенным именем внутри объекта и хочу проверить, соответствует ли оно предопределенному имени. Это технические характеристики продукта с определенным названием, таким как «длина», «ширина» и т.д.

У меня возникли проблемы с поиском этих конкретных имен, и если они будут найдены, получите их атрибут «значение».

Итак, у меня есть вот что:

Ответ JSON:

 {

"product": {
     "specs": {

       "231638": {
         "id": 231638,
         "title": "Length (mm)",
         "value": "1200"
     },
     "231641": {
         "id": 231641,
         "title": "Width (mm)",
         "value": "800"
     },
         "231644": {
         "id": 231644,
         "title": "Height (mm)",
         "value": "144"
     } //etc etc

Теперь я хочу захватить только два value атрибута из спецификаций «длина» и «высота». Поэтому сначала я должен посмотреть, присутствуют ли эти два имени и соответствуют ли они «длине» и «высоте», и если да, то захватить их value атрибуты. Вот тут-то мне и нужна помощь.

Конечный результат должен быть

 <div class="somediv">
 <span class="width">1200</span>
 <span class="height">144</span>
</div>

Итак, у меня есть вот что:

 $.getJSON(url', function(data){
         var specsHtml = [];

      $.each(data.product.specs, function(index, spec){
        // in here I need to test if the name of the spec equals "length or Height". 
        specsHtml.push(spec.value);
       });
       specsHtml = specsHtml.join('');  
      }
  container.find('.product-bottom .measurements span').html(specsHtml);
 });

Я совершенно застрял здесь. Я пробовал такие вещи, как:

 (spec.hasOwnProperty("title"));

или

  var specs = [];
        data.product.specs.forEach(data.product.specs => {
        if (data.product.specs)
        for (var spec in data.product.specs)
            specs.push(spec);
        })

Любая помощь будет очень признательна 🙂

Ответ №1:

 var data = {
  "product": {
    "specs": {
      "231638": {
        "id": 231638,
        "title": "Length (mm)",
        "value": "1200"
      },
      "231641": {
        "id": 231641,
        "title": "Width (mm)",
        "value": "800"
      },
      "231644": {
        "id": 231644,
        "title": "Height (mm)",
        "value": "144"
      } //etc etc
    }
  }
};

var length = 0, width = 0, height = 0,
  reLength = /length/i,
  reWidth = /width/i,
  reHeight = /height/i;
$.each(data.product.specs, function (specId, spec) {
  if (reLength.test(spec.title))
    length = spec.value;
  else if (reWidth.test(spec.title))
    width = spec.value;
  else if (reHeight.test(spec.title))
    height = spec.value;
});

var html = '<div class="somediv">'  
  '<span class="width">w: '   width   '</span>'  
  '<span class="height">h: '   height   '</span>'  
  '<span class="length">l: '   length   '</span>'  
  '</div>';
$(document.body).html(html); 
 .somediv > span { padding: 10px;  display:inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Комментарии:

1. Спасибо за ваш ответ.! Однако это продолжает возвращать «0» для всех полей. Не могли бы вы также, пожалуйста, объяснить, что означает «/длина/i»?

2. Хорошо, я, кажется, понимаю, что происходит не так. Ваше тестирование spec.title с помощью этого регулярного выражения, например, ширины. Однако это всегда будет ложным, так как его нужно сравнивать с value name этим спецификацией. Можете ли вы помочь в этом?

3. @Meules, я заменил код на выполняемый фрагмент кода. Проверить это

4. Хорошо, теперь я понял 🙂 Это регулярное выражение ищет часть имени, а не полное имя! Это работает сейчас… много раз!

Ответ №2:

 $.getJSON(url, function(data){
         var specsHtml = "<div class="somediv">";

      $.each(data.product.specs, function(){
        //'this' is now your current 'spec' which is { "id": ..., "title": ..., etc. }
        specsHtml  = '<span class="';
        if (this.title.includes('Length'))
          specsHtml  = 'length';
        else
          specsHtml  = 'width';

        specsHtml = specsHtml   '">'   this.value   '</span>';
       });
        specsHtml  = '</div>';
      }
  container.find('.product-bottom .measurements span').html(specsHtml);
 });
Метки: