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变量的值将是一个数组。我们只关心数组中的第一个值，因此我们将spread数组，定义一个名为first的新变量，该变量分配了数组中第一项的值，以及一个变量{ {1}}，它将是rest项的rest的数组。基本上，取数组的头。这些操作分别称为spread和rest。

urls

最后，从第一个({ urls: [first, ...rest] }) => first.type项返回type属性的值。

如果我完全错了

并且您想要每个urls数组中的“详细信息”项，则只需稍作更改即可：

urls

如果您想了解有关函数式编程的更多信息，Eric Elliott撰写了许多有关JavaScript的函数式编程的文章。这是first one。

Answer 2

您可以使用find通过type道具来查找确切的元素。

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);

Answer 3

如果数据格式固定，则可以使用。您还可以尝试其他方法来安全地从对象读取数据。您可以使用these之类的实用程序：

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

如果不确定第0个索引，可以使用find：

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

Answer 4

试试这个-

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 5

像这样吗？

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 6

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'));

如何获取JSON数组中的第一个密钥对？

6 个答案:

一种实用的方法...

让我们分解一下...

如果我完全错了