读取json文件中的嵌套值 - 使用JS

时间:2018-01-27 23:08:55

标签: javascript json getjson

我正在尝试从JSON文件中读取值。 到目前为止,我可以读到停止时间,但在此之后我无法弄清楚如何读取嵌套值。

我的JSON文件

 "description": [
    {
    "id": " an id number",
    "something 1": "xxxx",
    "something 2": "yyyy",
    "startTime": "2017-12-27T18:47:15.000+0000",
    "stopTime": "2017-12-27T18:47:15.000+0000",
    "mediaFiles": [
        {
        "mediaUri": " some url value",
        "mediaPath": "some path value",
        "startTime": " a time",

我的JS代码有效。

var J = [];
$.getJSON( "calls/jsonfile.json", function( data){
  J = data;
  var x = 48;
  for(x=0;x<48;++x) {
     var id = J.description[x].id;
     ...
  }
}

这很有效,我得到了我正在寻找的价值。

任何帮助都非常感谢......我对这些东西很陌生。

3 个答案:

答案 0 :(得分:0)

for(x=0;x<48;++x) {
    var id = J.description[x].id;
    // You can loop over the mediaFiles like this:
    for( num in J.description[x].mediaFiles ) {
        var theURI  = J.description[x].mediaFiles[num].mediaUri
        var thePath = J.description[x].mediaFiles[num].mediaPath
        ...
    }
    ...
}

答案 1 :(得分:0)

首先,不要硬编码x < 48。使用J.description.length,这样无论数组的实际长度如何,您的代码都将始终正确执行。

你想要这样的东西:

for (var x = 0; x < J.description.length; x++) {
    var descEntry = J.description[x];
    var id = descEntry.id;
    // do stuff with the description entry
    ...

    for (var y = 0; y < descEntry.mediaFiles.length; y++) {
        var fileEntry = descEntry.mediaFiles[y];
        // do stuff with the file entry
        ...
    }
}

第一个for循环将在x的所有索引上迭代J.description。我为当前条目添加了一个变量来简化操作。第二个for循环将在y(又名descEntry.mediaFiles)的所有索引上迭代J.description[x].mediaFiles

同样的事情,使用for-each循环迭代数组键(索引):

for (var x in J.description) {
    var descEntry = J.description[x];
    var id = descEntry.id;
    // do stuff with the description entry
    ...

    for (var y in descEntry.mediaFiles) {
        var fileEntry = descEntry.mediaFiles[y];
        // do stuff with the file entry
        ...
    }
}

同样的事情,使用new ES2015 features for-each循环迭代数组值:

for (var descEntry of J.description) {
    var id = descEntry.id;
    // do stuff with the description entry
    ...

    for (var fileEntry of descEntry.mediaFiles) {
        // do stuff with the file entry
        ...
    }
}

您的JavaScript环境可能不支持ECMAScript 2015(ES6)功能。此外,如果您尝试迭代非标准数组(例如,一个以上),for...in循环可能会发生奇怪的事情添加了哪些额外的属性。)

答案 2 :(得分:0)

您可以使用一些基本的函数javascript来获取json数组中的值。只使用几个函数就可以构成从数据集中获取任何值的能力。

  • 撰写 - 加入多项功能
  • flatMap - 展平2级数组,在每个值上运行函数
  • map - 在数组中的每个元素上运行一个函数,返回一个包含新值的新数组
  • prop - 获取对象的属性

使用函数式编程的好处是,您可以通过组合单独的可测试函数来创建很少的应用程序。您可以从ramdajs等库中获取这些功能。

const json = {
  "description": [
    {
      "id": 1,
      "mediaFiles": [
        { "mediaUri": "/images/1_1.png" },
        { "mediaUri": "/images/1_2.png" },
      ]
    },
    {
      "id": 2,
      "mediaFiles": [
        { "mediaUri": "/images/2_1.png" },
        { "mediaUri": "/images/2_2.png" },
      ]
    }
  ]
}

const prop = name => obj => obj[name]
const compose = (...fns) => x => fns.reduceRight((x, fn) => fn(x), x)
const map = fn => arr => arr.map(fn)
const flatMap = fn => arr => arr.reduce((acc, x) => acc.concat(fn(x)), [])

const getIds = compose(
  map(prop('id')),
  prop('description')
)

const getMediaUris = compose(
  flatMap(
    compose(
      map(prop('mediaUri')),
      prop('mediaFiles')
    )
  ),
  prop('description')
)

console.log(
  getIds(json)
)

console.log(
  getMediaUris(json)
)

expect('prop retrieves an object property', () => {
  assert(
    prop('one')({ one: 1 })
  ).equal(1)
})

expect('compose joins multiple functions', () => {
  assert(
    compose(
      z => z + 1,
      y => y + 1,
      x => x + 1
    )(0)
  ).equal(3)
})

expect('flatMap folds array', () => {
  assert(
    flatMap(x => x)([[1], [2]])
  ).deepEqual([1, 2])
})
<script src="https://codepen.io/synthet1c/pen/KyQQmL.js"></script>