Как получить первую пару ключей в массиве JSON?

Question

В настоящее время у меня есть JSON и функция, которая просматривает результаты, а затем просматривает URL-адреса.Я пытаюсь получить только первое значение типа, которое является деталью.Я попытался найти способы получить первое значение и обнаружил, что использование [0] может работать в некоторых ситуациях, но не в этой.Я неправильно индексирую?и есть ли более лаконичный способ кодирования этого вложенного цикла for?

const data = {
  "data": {
    "results": [{
      "name": "Deadpool",
      "urls": [{
          "type": "detail",
          "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "wiki",
          "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "comiclink",
          "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        }
      ]
    }]
  }
};

function test(data) {
  const dataArr = data.data['results'];
  for (let i = 0; i < dataArr.length; i++) {
    console.log(dataArr[i].urls);
    const urlArr = dataArr[i].urls
    for (let j = 0; j < urlArr.length; j++) {
      console.log(urlArr[j].type[0]);
    }
  }
}

test(data);

Answer 1

Функциональный подход ...

Ваш вопрос кажется немного расплывчатым, но я думаю, что вы ищете значение type из первого элемента в каждом массиве urls.

const data = {
    "data": {
        "results": [{
            "name": "Deadpool",
            "urls": [{
                "type": "detail",
                "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "wiki",
                "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "comiclink",
                 "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            }]
        }]
    }
};

const types = data.data.results.map(({ urls: [first, ...rest] }) => first.type);
console.log(types);

---

Давайте разберем это ...

data.data.results.map(...)

Array.prototype.map вернет новый массив срезультаты вызова предоставленной функции для каждого элемента в массиве results.

({ urls: ... })

Это называется destructuring .Он определяет новую переменную urls, которой присваивается значение свойства urls при выполнении итерации по элементам results.

({ urls: [first, ...rest] })

Значение переменной urls, которую мы определилибудет массив.Мы заботимся только о первом элементе в массиве, поэтому мы распространяем массив, определяя новую переменную с именем first, которой назначено значение первого элемента, и переменную rest,это будет массив rest элементов.В основном, возьмите голову массива.Эти операции называются spread и rest соответственно.

({  urls: [first, ...rest] }) => first.type

Наконец, верните значение свойства type из первого элемента urls.

---

Если я совершенно не прав

И вам нужен элемент "детали" в каждом массиве urls, тогда будет достаточно небольшое изменение:

const data = {
    "data": {
        "results": [{
            "name": "Deadpool",
            "urls": [{
                "type": "detail",
                "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "wiki",
                "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            },
            {
                "type": "comiclink",
                 "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
            }]
        }]
    }
};

const urls = data.data.results.map(({ urls }) => 
    urls.find(({ type }) => type === 'detail')
);
console.log(urls);

---

Если вы хотите узнать больше о функциональном программировании, Эрик Эллиотт написал отличный набор статей по функциональному программированию на JavaScript.Вот первый .

Answer 2

Попробуйте это-

function test(data) 
{
    var dataArr = data.data.results;

    for (let i = 0; i < dataArr.length; i++) {

        const urlArr = dataArr[i].urls
        for (let j = 0; j < urlArr.length; j++) {
            console.log(urlArr[0].type);
        }
    }

}

Answer 3

const data = {
  "data": {
    "results": [{
      "name": "Deadpool",
      "urls": [{
          "type": "detail",
          "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "wiki",
          "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "comiclink",
          "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        }
      ]
    }]
  }
};

console.log(data.data.results.map(el => el.urls).flat().find(el => el.type === 'detail'));

Answer 4

Как то так?

const data = {
  "data": {
    "results": [{
      "name": "Deadpool",
      "urls": [{
          "type": "detail",
          "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "wiki",
          "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "comiclink",
          "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        }
      ]
    }]
  }
};

const result = [].concat.apply([], data.data.results.map(x => x.urls.map(y => y.type)))[0];
console.log(result);

Answer 5

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

data.data['results'][0].urls[0]

Если вы не уверены в 0-м индексе, вы можете использовать find :

data.data['results'][0].urls.find(url => url.type === 'detail')

Answer 6

Вы можете использовать find, чтобы найти точный элемент по type prop.

const data = {
  "data": {
    "results": [{
      "name": "Deadpool",
      "urls": [{
          "type": "detail",
          "url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "wiki",
          "url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        },
        {
          "type": "comiclink",
          "url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
        }
      ]
    }]
  }
};

function test(data) {
  const dataArr = data.data['results'];
  for (let i = 0; i < dataArr.length; i++) {
    //console.log(dataArr[i].urls);
    const urlArr = dataArr[i].urls
    const detail = urlArr.find(url => url.type == 'detail');
    console.log(detail.url);
  }
}

test(data);