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

我试图从一个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中，该函数通过对象中的所有数组循环。这里的问题是，我不知道如何插入title值以使HTML获得它。尝试了很多方法，但都失败了。我正在尝试在ToiMiListData[key1][0]处插入标题值。标题：

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

函数CreateAccordionTitles（$container）{
for（var i=0；i

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

试图制作一个片段，说明它当前的工作方式以及需要在注释中更改的内容，但失败了，因此它崩溃了：

var placesdata={
“地点”：{
“柏林”：[
{
“位置”：“中心”，
“建筑物”：“A”，
“标题”：“德国”
},
{
“地点”：“郊区”，
“建筑物”：“B”，
}
],
“巴黎”：[
{
“位置”：“中心”，
“建筑物”：“C”，
“标题”：“法国”
},
{
“地点”：“郊区”，
“建筑物”：“D”，
},
{
“地点”：“郊区”，
“建筑物”：“E”，
}
]
}
}
函数CreateTitles（$container）{
for（var i=0；i”+
Object.keys（placesdata）[i]+//这需要像这样获取标题值ToiMiListData[key1][0]。标题
'
”+
“
”+
“”
如果（$container.length）{
$container.append（组件）；
//createToMipListContent（placesdata.Object.keys（placesdata）[i]，“+Object.keys（placesdata）[i]）；我需要它来工作
}
}
}
函数CreateToimListContent（数据，elementpos）{
对于（变量i=0；i'+dat[i].location+'）.appendTo（elementpos）；
$txtp.addClass（dat[i].建筑物）；
}
}
CreateTitles（$（“#放置”）；
CreateToiMiListContent（placesdata.Poliklinikat，“.Berlin”）；//我不想这样使用它们，它们需要来自CreateTitles函数，这些应该被删除
CreateToiMiListContent（placesdata.Tutkimustoimenpiteet，“.Paris”）；//我不想这样使用它们，它们需要来自CreateTitles函数，应该删除它们

您可以使用

Array.prototype.find

，它返回满足所提供谓词的第一个元素

我不知道什么是

toimistedata

，因此我将尽可能地给您举一个例子：

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

---

这是因为

placesdata.Places[city]

数组中具有

title

属性集的任何元素都将是“truthy”，因此将返回该对象。

您可以使用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);                        
    }
}

var places=placesdata.places；
for（变量位置在位置中）{
var分量=
'' +
'' +
地点[place][0]。标题+
'' +
'' +
'' +
'' +
''
如果（$container.length）{
$container.append（组件）；
}
}

只需扩展一下@ChristianScott的答案，您可以循环查看

placesdata[“Places”]

以获取城市，然后使用

find

方法获取标题

因此，为了完整性：

var placesdata={
“地点”：{
“柏林”：[{
“位置”：“中心”，
“建筑物”：“A”，
“标题”：“德国”
},
{
“地点”：“郊区”，
“建筑物”：“B”，
}
],
“巴黎”：[{
“位置”：“中心”，
“建筑物”：“C”，
“标题”：“法国”
},
{
“地点”：“郊区”，
“建筑物”：“D”，
},
{
“地点”：“郊区”，
“建筑物”：“E”，
}
]
}
}
让标题=[]；//标题数组
对于（让城市位于位置数据[“位置]）{//对于每个城市
titles.push（placesdata.Places[city].find（x=>x.title.title）；//查找和推送标题
}
控制台日志（标题）创建一个代码段，让我们看看您到目前为止做了什么。帮助您也会更容易：）代码片段做得很好，但在这种情况下，这没有帮助。刚刚添加了一个id为的div和设置函数的函数调用。很抱歉，ToiMiListData是原始json文件中使用的名称，我现在用placesdata替换了它。尝试了这个，但遗憾的是它没有给出任何值。也没有产生错误，因此快速测试没有找到它不起作用的原因。在控制台日志中的函数中使用此函数，它给出了0的数组，所有标题文本在HTML中都是未定义的。将其用作标题[i]，而不是原始的非工作位置数据[key1][0]。标题。@metzger我很困惑。为什么不先用这个来创建标题数组，然后再循环呢？我不明白你的意思。但是我在HTML注入之前在函数中设置了这个。