我怎样才能一次打印两个API结果

我已经从我想打印的API响应中识别出两条信息：data.points_of_interest [i] .main_image（和）data.points_of_interest [i] .title。我可以单独打印出来，如下面的代码所示;我怎样才能一次打印两个API结果

var src = data.points_of_interest[i].main_image; // URL of the image 
    var bodystuff = document.createElement('img'); 
    bodystuff.src=src; 
    document.getElementById('outputs').appendChild(bodystuff); 
    console.log(Image); 
var name = data.points_of_interest[i].title; 
    var bodystuff = document.createElement('p') 
    bodystuff.innerHTML = name 
    document.getElementById('outputs').appendChild(bodystuff) 
    console.log(name)

这里是我的HTML;

<section class="wrap" id="outputs"> 

</section>

我试图把它们打印无论是在一个实例，并试图“src.appendchild（名称）等组合，但都没有成功可言任何指针？

来源

2017-01-02 Ayokunle

什么*正是*你说的意思是“在一旦”？你想在一个段落中嵌套你的图像？ – Brad

是的，反之亦然 – Ayokunle

@Brad任何想法？ – Ayokunle

有很多方法可以做你想做的。一种方法是按照你想要的方式构建所有元素，并根据需要添加子元素。

https://jsfiddle.net/8154e4d1/

var outputSection = document.getElementById('outputs'); 
data.points_of_interest.forEach(function (poi) { 
    var img = document.createElement('img') 
    img.src = poi.main_image; 

    var p = document.createElement('p'); 
    p.textContent = poi.title; 
    p.appendChild(img); 

    outputSection.appendChild(p); 
});

在这个例子中，我们首先创建图像元素，并设置其src为图像URL。然后我们创建将包含文本以及图像的段落元素。接下来，我们将图像追加到这个段落。最后，我们将整段添加到外部部分。

如果你发现自己做了很多这样的事情，你可能会考虑切换到JavaScript模板引擎，如Swig。（有许多其他人也可以选择）

如果你决定使用jQuery的，这里有一个简单的版本：

https://jsfiddle.net/eemcpmys/1/

$('#outputs').append(
    data.points_of_interest.map(function (poi) { 
    return $('<p>').append([ 
     poi.title, 
     $('<img>').attr('src', poi.main_image) 
    ]); 
    }) 
);

来源

2017-01-02 01:36:05 Brad

我怎样才能一次打印两个API结果

回答

相关问题