Question

我试图从Json文件中获取某个值以进行html注入。 Json可以拥有比本例中更多的数组，但只有每个数组的第一个数组值具有称为title的特定值。示例json：

  var placesdata= {
      "Places": {
        "Berlin": [
          {
            "location": "Center",
            "buildings": "A",
            "title": "Germany"
          },
          {
            "location": "Suburbs",
            "buildings": "B",
          }
        ],
        "Paris": [
          {
            "location": "Center",
            "buildings": "C",
            "title": "France"
          },
          {
            "location": "Suburbs",
            "buildings": "D",
          },
          {
            "location": "Outskirts",
            "buildings": "E",
          }
        ]
      }
    }

我将所有值都插入到一个函数中，该函数循环遍历对象中的所有数组。这里的问题是我不知道如何插入标题值以便HTML获取它。试过很多方法，但都失败了。我试图在toimipistedata [key1] [0]插入标题值.title：

function CreateAccordionTitles($container) {
    for (var i = 0; i < Object.keys(placesdata).length; i++) {
        var component =
            '<div class="title">' +
                '<i class="dropdown icon"></i>' +
            placesdata[key1][0].title + 
            '</div>' +
            '<div class="content styleSetSubAccordion">' +
            '<div class="ui two column divided grid ' + Object.keys(placesdata)[i] + '\">' +
            '</div>' +
            '</div>'
        if ($container.length) {
            $container.append(component);                        
        }
    }
}

（$ container是HTML元素的id / class）那么如何从对象数组中获取标题值，以便我可以将其与HTML一起插入？

尝试制作一个片段，说明它目前是如何运作的，以及需要在评论中更改的内容，但却失败了，所以它就破了：

＆＃13;

 var placesdata= {
      "Places": {
        "Berlin": [
          {
            "location": "Center",
            "buildings": "A",
            "title": "Germany"
          },
          {
            "location": "Suburbs",
            "buildings": "B",
          }
        ],
        "Paris": [
          {
            "location": "Center",
            "buildings": "C",
            "title": "France"
          },
          {
            "location": "Suburbs",
            "buildings": "D",
          },
          {
            "location": "Outskirts",
            "buildings": "E",
          }
        ]
      }
    }
    function CreateTitles($container) {
        for (var i = 0; i < Object.keys(placesdata).length; i++) {
            var component =
                '<li>' +
                Object.keys(placesdata)[i] + //this needs to get the title value like this toimipistedata[key1][0].title 
                '<ul class="place ' + Object.keys(placesdata)[i] + '\">' +
                '</ul>' +
                '</li>' 

            if ($container.length) {
                $container.append(component);
                //CreateToimipisteContent(placesdata.Object.keys(placesdataa)[i], "." + Object.keys(placesdata)[i]);  I need this to work
            }

        }
    }
    
        function CreateToimipisteContent(data, elementpos) {

        for (var i = 0; i < data.length; i++) {
            var dat = data;
            var $txtp = $('<li>' + dat[i].location + '</li>').appendTo(elementpos);
            $txtp.addClass(dat[i].buildings);
        }
    }
    
    		CreateTitles($("#Placement"));
        CreateToimipisteContent(placesdata.Poliklinikat, ".Berlin"); // i dont want to use these like this they need to come form the CreateTitles function, these should be removed
        CreateToimipisteContent(placesdata.Tutkimustoimenpiteet, ".Paris"); // i dont want to use these like this they need to come form the CreateTitles function, these should be removed

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="Placement"></ul>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

您可以使用Array.prototype.find，它返回满足提供的谓词的第一个元素。

我不知道toimipistedata是什么，所以我会尽量给你一个例子：

var title = placesdata.Places[city].find(x => x.title).title;

这是有效的，因为placesdata.Places[city]数组中设置了title属性的任何元素都将是“truthy”，因此将返回该对象。

Answer 2

您可以使用 for in ：

尝试这个简单的解决方案

var places = placesdata.Places;
for (var place in places) {
    var component =
        '<div class="title">' +
            '<i class="dropdown icon"></i>' +
        places[place][0].title + 
        '</div>' +
        '<div class="content styleSetSubAccordion">' +
        '<div class="ui two column divided grid ' + place + '\">' +
        '</div>' +
        '</div>'
    if ($container.length) {
        $container.append(component);                        
    }
}

Answer 3

为了扩展@ ChristianScott的答案，您可以循环placesdata["Places"]以获取城市，然后使用find方法获取标题。

所以，为了完整性：

var placesdata = {
  "Places": {
    "Berlin": [{
        "location": "Center",
        "buildings": "A",
        "title": "Germany"
      },
      {
        "location": "Suburbs",
        "buildings": "B",
      }
    ],
    "Paris": [{
        "location": "Center",
        "buildings": "C",
        "title": "France"
      },
      {
        "location": "Suburbs",
        "buildings": "D",
      },
      {
        "location": "Outskirts",
        "buildings": "E",
      }
    ]
  }
}

let titles = [];  // titles array
for (let city in placesdata["Places"]) {  // for each city
  titles.push(placesdata.Places[city].find(x => x.title).title);  // find & push title
}
console.log(titles);

从对象数组中获取特定值以进行html注入

3 个答案: